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>