The way I see Javascript.
There has to be a better way, always...
const app = {
target: {
ham: document.querySelector(".ham-menu"),
menu: document.querySelector("nav ul"),
list: document.querySelectorAll(".desktop"),
link: document.querySelectorAll("nav ul li a"),
},
trigger: {
toggleMenu() {
app.target.menu.classList.toggle("menu");
app.target.list.forEach((li) => {
if (app.target.menu.className === "menu") {
li.style.cssText = "display: flex;";
} else {
li.style.cssText = "display: none";
}
});
},
},
run() {
app.target.ham.addEventListener("click", () => {
app.trigger.toggleMenu();
});
app.target.link.forEach((a) => {
a.addEventListener("click", () => {
app.trigger.toggleMenu();
});
});
},
};
app.run();