From 11554ed790e63ff5ec8ba778c2161923b2c4fcf8 Mon Sep 17 00:00:00 2001 From: Tyler Hoang Date: Wed, 6 May 2026 16:45:56 -0700 Subject: 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 --- static/app.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'static/app.js') 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"); -- cgit v1.3-2-g0d8e