Hello whiny.lol

assets/js/menu.js

@@ -0,0 +1,42 @@
+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";
+    }
+  }
+});