Improve mobile navbar

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;

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>

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>