React responsive navbar between state and media query - reactjs

Question

i have a sidebar that will disappear on a width of 992px and below using the following media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
while mobile nav icon also appear through the following code:
<nav class="mobileNav">
<div class="navLink" href="#">
<div></div>
<div></div>
<div></div>
</div>
</nav>
#media only screen and (max-width: 992px) {
.mobileNav {
display: flex;
}
}
now when i click on this nav , sidebar should appear and disappear, so i made the following state :
const [showSidebar, setShowSidebar] = useState(true);
and modified the following code :
{showSidebar ? (
<div className="sideBar">
<SidebarComponent />
</div>
) : null}
and added onClick function to modify the state :
<nav class="mobileNav" onClick={() => setState(!state)>
...
</nav>
when user clicks on nav element, it indeed changes the state, but sidebar will not appear because of the css media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
so how can i make the state override the media query, or how to solve it in a better way ?

Answer 1

You should aim to use either CSS OR JS for your solution rather than both.
So you can have the sidebar always in the DOM but use CSS to hide/move it off screen and then all the control is in the CSS.
Or you can hide and reveal the sidebar/nav in JS based on screen/window width but this will require you create an event listener so that every time the user adjusts the windows size you check again if you should hide or reveal the sidebar/nav.
Also instead of using your media query on ".sidebar" add an additional class such as "sidebar--active" or similar and then use JS to add/remove the classname as needed and the css to hide or reveal it.