I created a mobile menu when every I display the navigation on the desktop it disappeared. I'm using the same JS effect that I'm using to create the dropdown for one of the nav links. I don't want the navigation to disappeared when every I click on it.
How can I have the navigation appeared on desktop screen?
This Code Below:
import React from 'react';
import { Link } from 'react-router-dom';
import Dropdown from '../dropdowns/dropdown.js';
import hamburger from "../images/menu.svg";
class MobileDropdown extends React.Component {
constructor(){
super();
this.state = {
displayMenu: false,
};
this.showDropdownMenu = this.showDropdownMenu.bind(this);
this.hideDropdownMenu = this.hideDropdownMenu.bind(this);
};
showDropdownMenu(event) {
event.preventDefault();
this.setState({ displayMenu: true }, () => {
document.addEventListener('click', this.hideDropdownMenu);
});
}
hideDropdownMenu() {
this.setState({ displayMenu: false }, () => {
document.removeEventListener('click', this.hideDropdownMenu);
});
}
render() {
return (
<div className="FlexContainer NavbarContainer">
<div className="mobilecontainer LeftNav">
<h2 className="BrandName LeftNav mobileboxmenu inline">Kommonplaces</h2>
<div className="hamburger inline" onClick={this.showDropdownMenu}><img alt="menubtn" src={hamburger}></img></div>
</div>
{ this.state.displayMenu ? (
<>
<ul className="NavBar">
<Dropdown/>
<li className="RightNav"><Link to="/">Host Your Space</Link></li>
<li className="RightNav"><Link to="/">About Us</Link></li>
<li className="RightNav"><Link to="/">Contact Us</Link></li>
<li className="RightNav"><Link to="/">Sign Up</Link></li>
<li className="RightNav"><Link to="/">Login</Link></li>
</ul>
</>
):
(
null
)
}
</div>
);
}
}
export default MobileDropdown;