mobile friendly

views/partials/adminNav.ejs

@@ -1,4 +1,4 @@
-<aside class="fixed inset-y-0 left-0 w-56 bg-surface-900 border-r border-gray-800 flex flex-col z-20">
+<aside id="admin-sidebar" class="fixed inset-y-0 left-0 w-56 bg-surface-900 border-r border-gray-800 flex flex-col z-30 -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out">
   <!-- Brand -->
   <div class="flex items-center gap-3 px-5 py-5 border-b border-gray-800">
     <% if (brand.brand_logo_path) { %>
@@ -36,7 +36,7 @@
       const active = currentPath && (currentPath === item.href || (item.href !== '/admin' && currentPath.startsWith(item.href)))
     %>
     <a href="<%= item.href %>"
-       class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors <%= active ? 'btn-accent text-white font-medium' : 'text-gray-400 hover:text-white hover:bg-surface-800' %>">
+       class="nav-link flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors <%= active ? 'btn-accent text-white font-medium' : 'text-gray-400 hover:text-white hover:bg-surface-800' %>">
       <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
         <%- icons[item.icon] %>
       </svg>
@@ -57,3 +57,6 @@
     </form>
   </div>
 </aside>
+
+<!-- Mobile overlay backdrop -->
+<div id="sidebar-overlay" class="fixed inset-0 bg-black/60 z-20 hidden lg:hidden" aria-hidden="true"></div>

views/partials/adminTopBar.ejs

@@ -0,0 +1,27 @@
+<!-- Mobile-only top bar — hidden on lg+ where the sidebar is always visible -->
+<div class="lg:hidden fixed top-0 left-0 right-0 h-14 bg-surface-900 border-b border-gray-800 flex items-center justify-between px-4 z-40">
+  <!-- Hamburger -->
+  <button id="sidebar-open-btn" aria-label="Open navigation"
+    class="flex items-center justify-center w-9 h-9 rounded-lg text-gray-400 hover:text-white hover:bg-surface-800 transition-colors">
+    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </svg>
+  </button>
+
+  <!-- Brand -->
+  <div class="flex items-center gap-2">
+    <% if (brand.brand_logo_path) { %>
+    <img src="/brand/logo" alt="<%= brand.brand_name %>" class="h-6 w-auto object-contain" />
+    <% } else { %>
+    <div class="h-6 w-6 rounded-md btn-accent flex items-center justify-center shrink-0">
+      <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+    </div>
+    <% } %>
+    <span class="text-sm font-semibold text-white truncate max-w-[140px]"><%= brand.brand_name %></span>
+  </div>
+
+  <!-- Spacer to balance hamburger -->
+  <div class="w-9"></div>
+</div>