/    Sign up×
Community /Pin to ProfileBookmark

Double toggle + Double function Javascript

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: http://94.237.92.101:6060/home

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...