feat(ui): Mobile hamburger nav menu

templates/base.html

@@ -56,7 +56,11 @@
 
     <nav class="navbar">
       <div class="nav-container">
-        <a href="{{ url_for('index') }}" class="logo" aria-label="RideAware home">
+        <a
+          href="{{ url_for('index') }}"
+          class="logo"
+          aria-label="RideAware home"
+        >
           <img
             src="{{ url_for('static', filename='assets/logo.png') }}"
             alt="RideAware"
@@ -67,9 +71,22 @@
             fetchpriority="high"
           />
         </a>
-        <ul class="nav-links">
+
+        <button
+          class="nav-toggle"
+          id="nav-toggle"
+          aria-label="Toggle navigation"
+          aria-controls="primary-nav"
+          aria-expanded="false"
+        >
+          <span class="bar"></span>
+          <span class="bar"></span>
+          <span class="bar"></span>
+        </button>
+
+        <ul class="nav-links" id="primary-nav">
           {% if is_home %}
-            <li><a href="#features">Features</a></li>
+          <li><a href="#features">Features</a></li>
           {% endif %}
           <li><a href="{{ url_for('newsletters') }}">Newsletters</a></li>
         </ul>
@@ -89,6 +106,43 @@
       crossorigin="anonymous"
     ></script>
 
-    {% block extra_scripts %}{% endblock %}
+    {% block extra_scripts %}
+    <script>
+      (function () {
+        const btn = document.getElementById("nav-toggle");
+        const menu = document.getElementById("primary-nav");
+        if (!btn || !menu) return;
+
+        function closeMenu() {
+          btn.classList.remove("active");
+          btn.setAttribute("aria-expanded", "false");
+          menu.classList.remove("open");
+        }
+
+        btn.addEventListener("click", () => {
+          const open = btn.classList.toggle("active");
+          btn.setAttribute("aria-expanded", String(open));
+          menu.classList.toggle("open", open);
+        });
+
+        // Close on link click (for anchors like #features)
+        menu.addEventListener("click", (e) => {
+          if (e.target.tagName === "A") closeMenu();
+        });
+
+        // Close on escape
+        document.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") closeMenu();
+        });
+
+        // Close if clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menu.contains(e.target) && !btn.contains(e.target)) {
+            closeMenu();
+          }
+        });
+      })();
+    </script>
+    {% endblock %}
   </body>
-</html>
+</html>