I have a vision to create a navigation for an admin template that works on both mobile and desktop. So far I have done some steps. But I think my code is a bit clumsy, so I wonder if there is a simpler way to write this code. The Double function is that the meny should work with both the hamburger meny AND when resizing the window. The Double toggle is that the menu should expand and collapse in two steps.
My question is if there is a way to simplify this further?
“`
window.addEventListener(“resize”, resize);
function resize() {
let win = window.innerWidth;
if (win < 480) {
window.localStorage.setItem(‘menu’, “closemain”);
} else if (win < 769) {
window.localStorage.setItem(‘menu’, “openmain”);
} else {
window.localStorage.setItem(‘menu’, “opensub”);
}
menu() // update menu
}
function menu() {
switch (localStorage.menu) {
case “openmain”:
mainnav.classList.remove(“close”)
subnav.classList.add(“close”)
window.localStorage.setItem(‘menu’, “opensub”);
break;
case “opensub”:
mainnav.classList.remove(“close”)
subnav.classList.remove(“close”)
window.localStorage.setItem(‘menu’, “closesub”);
break;
case “closesub”:
mainnav.classList.remove(“close”)
subnav.classList.add(“close”)
window.localStorage.setItem(‘menu’, “closemain”);
break;
case “closemain”:
mainnav.classList.add(“close”)
subnav.classList.add(“close”)
window.localStorage.setItem(‘menu’, “openmain”);
break;
}
}
Live demo: