Add hamburger menu for mobile navigation

Hide nav-actions on mobile (<= 760px) and show a hamburger menu button
instead. Menu opens/closes on click and closes when a link is clicked
or when clicking outside. Hamburger icon created with CSS pseudo-elements.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 27 insertions, 0 deletions

diff --git a/static/app.js b/static/app.js
index 02f70f8..7b5a88f 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,3 +1,30 @@
+// Hamburger menu toggle
+const menuToggle = document.querySelector("#menu-toggle");
+const navActions = document.querySelector("#nav-actions");
+
+if (menuToggle && navActions) {
+  menuToggle.addEventListener("click", () => {
+    const isOpen = navActions.classList.toggle("is-open");
+    menuToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  });
+
+  // Close menu when a link is clicked
+  navActions.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", () => {
+      navActions.classList.remove("is-open");
+      menuToggle.setAttribute("aria-expanded", "false");
+    });
+  });
+
+  // Close menu when clicking outside
+  document.addEventListener("click", (event) => {
+    if (!navActions.contains(event.target) && !menuToggle.contains(event.target)) {
+      navActions.classList.remove("is-open");
+      menuToggle.setAttribute("aria-expanded", "false");
+    }
+  });
+}
+
 const tmdbQuery = document.querySelector("#tmdb-query");
 const tmdbButton = document.querySelector("#tmdb-search");
 const tmdbResults = document.querySelector("#tmdb-results");