From 93f6109028c3231e6411caeff89760448ab8efd9 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Mon, 11 May 2026 11:37:33 +0200
Subject: [PATCH] Add hamburger menu for mobile nav

---
 site/src/layouts/Base.astro | 56 +++++++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
index 8790fef..d4575c4 100644
--- a/site/src/layouts/Base.astro
+++ b/site/src/layouts/Base.astro
@@ -237,34 +237,34 @@ try {
               id="admin-jobs-badge"
               style="display:none"
               title=""
-              class="text-xs px-2 py-0.5 rounded-full bg-amber-900/60 text-amber-300 border border-amber-700/50 animate-pulse cursor-default"
+              class="hidden sm:flex text-xs px-2 py-0.5 rounded-full bg-amber-900/60 text-amber-300 border border-amber-700/50 animate-pulse cursor-default"
             ></span>
             <!-- Settings link — hidden until logged in -->
             <a
               id="nav-settings"
               href={`${baseUrl}settings/`}
               style="display:none"
-              class="text-xs text-zinc-500 hover:text-white transition-colors px-1"
+              class="hidden sm:inline text-xs text-zinc-500 hover:text-white transition-colors px-1"
             >Settings</a>
             <!-- Admin link — hidden until confirmed admin -->
             <a
               id="nav-admin"
               href={`${baseUrl}admin/`}
               style="display:none"
-              class="text-xs text-zinc-500 hover:text-white transition-colors px-1"
+              class="hidden sm:inline text-xs text-zinc-500 hover:text-white transition-colors px-1"
             >Admin</a>
 
             <!-- Logout button — hidden until logged in -->
             <button
               id="nav-logout"
               style="display:none"
-              class="text-xs text-zinc-500 hover:text-white transition-colors px-2 h-8"
+              class="hidden sm:inline text-xs text-zinc-500 hover:text-white transition-colors px-2 h-8"
               aria-label="Log out"
             >Log out</button>
             {editEnabled && (
               <button
                 id="upload-btn"
-                class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
+                class="hidden sm:flex text-zinc-400 hover:text-white transition-colors w-8 h-8 items-center justify-center rounded-md hover:bg-zinc-800 text-base"
                 aria-label="Upload activity"
                 title="Upload activity"
               >↑</button>
@@ -276,8 +276,32 @@ try {
           class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
           aria-label="Toggle theme"
         >☀</button>
+        {!isPublicPage && (
+          <button
+            id="nav-hamburger"
+            style="display:none"
+            class="sm:hidden text-zinc-400 hover:text-white w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
+            aria-label="Menu"
+          >☰</button>
+        )}
       </div>
     </div>
+    {!isPublicPage && (
+      <div id="nav-menu" class="hidden border-t sm:hidden"
+           style="border-color: var(--border); background: var(--bg-card)">
+        <div class="max-w-7xl mx-auto px-4 py-2 flex flex-col">
+          <a href={`${baseUrl}settings/`}
+             class="text-sm px-2 py-1.5 rounded hover:bg-zinc-800 transition-colors"
+             style="color: var(--text-4)">Settings</a>
+          <a id="nav-admin-m" href={`${baseUrl}admin/`}
+             style="display:none; color: var(--text-4)"
+             class="text-sm px-2 py-1.5 rounded hover:bg-zinc-800 transition-colors">Admin</a>
+          <button id="nav-logout-m"
+             class="text-sm px-2 py-1.5 rounded hover:bg-zinc-800 transition-colors text-left"
+             style="color: var(--text-4)">Log out</button>
+        </div>
+      </div>
+    )}
   </nav>
 
   {editEnabled && (
@@ -550,6 +574,8 @@ try {
           if (settingsEl) settingsEl.style.display = '';
           const logoutEl = document.getElementById('nav-logout');
           if (logoutEl) logoutEl.style.display = '';
+          const hamburgerEl = document.getElementById('nav-hamburger');
+          if (hamburgerEl) hamburgerEl.style.display = '';
 
           // Pre-populate the "keep original" checkbox from the instance default
           const chk = document.getElementById('upload-keep-original');
@@ -584,6 +610,8 @@ try {
           if (user.is_admin) {
             const adminLink = document.getElementById('nav-admin');
             if (adminLink) adminLink.style.display = '';
+            const adminLinkM = document.getElementById('nav-admin-m');
+            if (adminLinkM) adminLinkM.style.display = '';
             const badge = document.getElementById('admin-jobs-badge');
             async function pollJobs() {
               try {
@@ -609,9 +637,25 @@ try {
         } catch (_) {}
       })();
 
-      document.getElementById('nav-logout')?.addEventListener('click', async () => {
+      async function doLogout() {
         try { await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
         window.location.href = baseUrl + 'login/';
+      }
+      document.getElementById('nav-logout')?.addEventListener('click', doLogout);
+      document.getElementById('nav-logout-m')?.addEventListener('click', doLogout);
+
+      const hamburger = document.getElementById('nav-hamburger');
+      const navMenu   = document.getElementById('nav-menu');
+      hamburger?.addEventListener('click', () => {
+        const open = navMenu?.classList.toggle('hidden') === false;
+        hamburger.textContent = open ? '✕' : '☰';
+      });
+      document.addEventListener('click', (e) => {
+        if (navMenu && !navMenu.classList.contains('hidden') &&
+            !navMenu.contains(e.target) && !hamburger?.contains(e.target)) {
+          navMenu.classList.add('hidden');
+          if (hamburger) hamburger.textContent = '☰';
+        }
       });
     </script>
   )}