43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
function mobileMenu() {
|
|
const menu = document.querySelector(".mobile-navigation");
|
|
const button = document.getElementById("menu-button");
|
|
const open = menu.classList.contains("nav-open");
|
|
|
|
if (open) {
|
|
menu.classList.replace("nav-open", "nav-closed");
|
|
button.setAttribute("aria-expanded", "false");
|
|
button.setAttribute("aria-label", "Open mobile navigation");
|
|
button.textContent = "Menu";
|
|
} else {
|
|
document.body.classList.add("overflow-hidden");
|
|
menu.classList.replace("nav-closed", "nav-open");
|
|
button.setAttribute("aria-expanded", "true");
|
|
button.setAttribute("aria-label", "Close mobile navigation");
|
|
button.textContent = "Close";
|
|
}
|
|
}
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
const menu = document.querySelector(".mobile-navigation");
|
|
const open = menu.classList.contains("nav-open");
|
|
if (open) {
|
|
mobileMenu();
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
const menu = document.querySelector(".mobile-navigation");
|
|
const button = document.getElementById("menu-button");
|
|
const open = menu.classList.contains("nav-open");
|
|
if (window.innerWidth > 640) {
|
|
if (open) {
|
|
menu.classList.replace("nav-open", "nav-closed");
|
|
button.setAttribute("aria-expanded", "false");
|
|
button.setAttribute("aria-label", "Open mobile navigation");
|
|
button.textContent = "Menu";
|
|
}
|
|
}
|
|
});
|