From 8686e7b9656ad7c33c89195da0aa344445d46362 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sat, 3 Jan 2026 16:38:45 -0500
Subject: [PATCH] Improve mobile navbar

---
 public/styles.css         | 18 ++++++++++++++++++
 views/partials/footer.ejs | 15 +++++++++++++++
 views/partials/header.ejs | 11 +++++++----
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 0f53f69..d5ea09d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -35,6 +35,9 @@ body {
   gap: 0.75rem;
 }
 
+.navbar-item img{
+  max-height: none;
+}
 .brand-logo {
   width: 52px;
   height: 52px;
@@ -271,6 +274,21 @@ body {
   color: var(--ink);
 }
 
+@media (max-width: 1023px) {
+  .navbar-menu {
+    display: block;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height 0.25s ease, opacity 0.2s ease;
+  }
+
+  .navbar-menu.is-active {
+    max-height: 360px;
+    opacity: 1;
+  }
+}
+
 @media (max-width: 768px) {
   .pad-hero {
     padding: 1.5rem 1rem;
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index b97d1cd..c9a4f32 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -1,4 +1,19 @@
       </div>
     </section>
+    <script>
+      (function () {
+        var burgers = document.querySelectorAll('.navbar-burger');
+        burgers.forEach(function (burger) {
+          burger.addEventListener('click', function () {
+            var targetId = burger.dataset.target;
+            var menu = document.getElementById(targetId);
+            burger.classList.toggle('is-active');
+            if (menu) {
+              menu.classList.toggle('is-active');
+            }
+          });
+        });
+      })();
+    </script>
   </body>
 </html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index a670926..a20e1f1 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -22,11 +22,14 @@
           <img class="brand-logo" src="/ios/256.png" alt="Pedal logo" />
           <span>Pedal</span>
         </a>
+        <button class="navbar-burger" type="button" aria-label="menu" aria-expanded="false" data-target="main-navbar">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </button>
       </div>
-      <div class="navbar-menu">
-        <div class="navbar-start">
-          <a class="navbar-item" href="/">Pads</a>
-        </div>
+      <div class="navbar-menu" id="main-navbar">
+        <div class="navbar-start"></div>
         <div class="navbar-end">
           <% if (currentUser && currentUser.is_admin) { %>
           <a class="navbar-item" href="/admin">Admin</a>