Mobile menu effect expands to desktop view - reactjs

Question

Question:
How can I have the navigation of the mobile menu not affect desktop? When I click on the hamburger button to hide the menu and resize the browser to desktop the navigation disappears. I want to know what I did wrong to better understand my mistake.
GIF Video
Full Code Below:
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
}
this.toggleShow = this.toggleShow.bind(this)
this.hide = this.hide.bind(this)
}
toggleShow() {
this.setState({
show: !this.state.show
});
}
hide(e) {
if (e && e.relatedTarget) {
e.relatedTarget.click();
}
}
render() {
return (
<Router>
<div className="FlexContainer NavbarContainer">
<div className="mobilecontainer LeftNav">
<h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
<div
className="hamburger inlinev"
onClick={this.toggleShow}
onBlur={this.hide}>
<img alt="menubtn" src={hamburger}></img>
</div>
</div>
{
this.state.show &&
(
<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>
)
}
</div>
</Router>
);
}
}
export default Navigation;
SCSS Code:
.NavbarContainer {
border-bottom: 1px #E7E7E7 solid;
.mobilecontainer {
margin: 2.1em;
.hamburger {
display: inline;
img {
width: 35px;
cursor: pointer;
float: right;
}
}
}
.NavBar {
// display: none;
.RightNav {
text-align: center;
padding: 27px 0;
border-right: none;
border-left: none;
border-bottom: 1px #E7E7E7 solid;
font-size: large;
a {
color: #0E0E0E;
}
}
}
.Dropdown {
float: none;
overflow: hidden;
.Dropdown-Content {
position: relative;
background-color: white;
z-index: 2;
min-width: 217px;
a {
float: none;
display: block;
text-align: center;
border: 1px #E7E7E7 solid;
padding: 15px 22px;
}
}
}
.dropdown-content {
a {
&:hover {
background-color: #ddd
}
}
}
.dropdown {
&:hover {
.dropdown-content {
display: block;
}
}
}
.LeftNav {
flex-grow: 8.2;
font-weight: bold;
font-size: large;
display: flex;
align-items: center;
}
#media (min-width: 55em) {
display: flex;
flex-direction: row;
align-items: center;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 60px;
background-color: #ffffff;
padding: 3em;
.LeftNav {
flex-grow: 0.2;
font-weight: bold;
font-size: large;
}
.mobilecontainer {
margin: 0;
.hamburger {
img {
display: none
}
}
}
.NavBar {
display: flex;
.RightNav {
padding-left: 15px;
padding-right: 15px;
text-align: initial;
border-bottom: none;
font-size: large;
}
.FarRight {
flex-grow: 1;
}
}
.Dropdown {
float: left;
overflow: hidden;
.Dropdown-Content {
position: absolute;
top: 96px;
background-color: white;
z-index: 2;
min-width: 217px;
a {
text-align: left;
padding: 15px 22px;
}
}
}
}
}
This is SCSS code that I'm using for this project.

Answer 1

this.state.show is responsible just for toggle mobile menu.when show ===false react ignore rendering navBar neither in mobile or desktop.you cant use this way for your goal.My suggestion is to consider using react-bootstrap Navbar or reactstrap Navbar
I hope this will help you.