Navigation Bar Component
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../../redux/actions/auth';
import './Navigation.styles.css';
import ham from './assets/ham.svg';
import exit from './assets/exit.svg';
export const NavigationBar = ({ auth: { isAuthenticated, loading }, logout }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const authLinks = (
<div className='buttons'>
<Link to='/'>
<button onClick={logout} className='button'>
Logout
</button>
</Link>
</div>
);
const guestLinks = (
<div className='buttons'>
<Link to='/register'>
<button className='button'>Register</button>
</Link>
<Link to='login'>
<button className='button'>Login</button>
</Link>
</div>
);
console.log(isMenuOpen);
return (
<div className='container'>
<header>
<h2>
<Link to='/' className='logo' alt='Escapebe logo'>
<i className='fas fa-microphone'></i> Escapebe
</Link>
</h2>
<nav>
<Link to='#' className='hide-desktop'>
<img
src={ham}
alt='toggle menu'
className='menu'
onClick={() => setIsMenuOpen({ isMenuOpen: !isMenuOpen })}
/>
</Link>
<ul
className={
isMenuOpen
? 'hide-desktop show-mobile'
: 'show-desktop hide-mobile'
}
>
<li className='exit-btn hide-desktop'>
<img
src={exit}
onClick={() =>
setIsMenuOpen({
isMenuOpen: !isMenuOpen
})
}
/>
</li>
<li>
<Link to='/'>News</Link>
</li>
<li>
<Link to='/'>Groups</Link>
</li>
<li>
<Link to='/'>About</Link>
</li>
<li>
<Link to='/'>FAQ</Link>
</li>
{!loading && (
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
)}
</ul>
</nav>
</header>
</div>
);
};
NavigationBar.propTypes = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps, { logout })(NavigationBar);
MainSection.styles.css
.container {
text-align: center;
padding: 0.8em 1.2em;
color: #d1d0d0;
}
.button {
background-color: #4caf50;
border: none;
width: calc(100% - 1em);
display: block;
color: #d1d0d0;
border-radius: 20px;
padding: 0.5em;
text-decoration: none;
font-size: 1em;
margin: 3% auto 7%;
position: relative;
z-index: 4;
cursor: pointer;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button:hover {
background-color: green;
color: white;
}
.triangle {
margin: 2em auto 2em 45%;
width: 70%;
}
h1,
.subhead {
position: relative;
z-index: 3;
}
.subhead {
font-size: 1.1em;
}
@media only screen and (min-width: 650px) {
.triangle {
width: 50%;
}
.button {
width: 35%;
}
h1 {
font-size: 2em;
margin: 0;
}
.subhead {
font-size: 1.4em;
margin-bottom: 12%;
}
}
@media only screen and (min-width: 1000px) {
.button {
width: 35%;
}
.container {
width: 80%;
margin: 0 auto 13% auto;
}
.hide-desktop {
display: none;
}
.show-desktop {
display: block;
margin: 0 auto 13% auto;
}
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
}
nav ul li a {
color: black;
background-color: inherit;
text-align: right;
padding: 1em 2em;
}
nav ul li a:hover {
background-color: inherit;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 70%;
}
}
Navigation Logo styles may be causing issues with the functionality of your hamburger menu. Try checking your CSS for any conflicting or incorrect styling that could impact the behavior.