I'm working on creating a sidebar navigation that stays fixed on desktop but collapses on mobile devices. The issue I'm facing is that once I toggle the navigation on mobile, it remains toggled and doesn't show up on desktop. Check out my code snippet below:
HTML
<div class="d-flex" id="wrapper">
<div class="bg-light" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="heading-img" src="./images/logo.png"></div>
<div class="list-group list-group-flush nav-group nav-items">
<a href="index.html" class="list-group-item list-group-item-action bg-light nav-single"> <img class="nav-img" src="./images/home.svg">Home</a>
<a href="#" class="list-group-item list-group-item-action bg-light nav-single"> <img class="nav-img" src="./images/settings.svg">Settings</a>
<a href="#" class="list-group-item list-group-item-action bg-light nav-single"><img class="nav-img" src="./images/exit.svg">Exit</a>
</div>
</div>
CSS
#menu-toggle{
display: none;
}
@media (max-width: 768px){
#menu-toggle{
display: unset;
}
}
JS
<script>
$("#menu-toggle").click(function(e) {
$("#wrapper").toggleClass("toggled");
});
</script>
Can anyone suggest how to detect the resize event and remove the "toggled" class?