feat(ui): add mobile-responsive layout with hamburger drawer

Adds MobileHeader with hamburger button (left-aligned) that opens a
slide-in sidebar drawer on mobile. Desktop layout is unchanged. All
hardcoded multi-column grids updated with responsive Tailwind breakpoints.

Co-Authored-By: Jack Levy

frontend/components/shared/AuthGuard.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useAuthStore } from "@/stores/authStore";
 import { Sidebar } from "./Sidebar";
+import { MobileHeader } from "./MobileHeader";
 
 const PUBLIC_PATHS = ["/login", "/register"];
 
@@ -13,6 +14,7 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
   const token = useAuthStore((s) => s.token);
   // Zustand persist hydrates asynchronously — wait for it before rendering
   const [hydrated, setHydrated] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     setHydrated(true);
@@ -38,12 +40,30 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
   // Authenticated: render the full app shell
   return (
     <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="container mx-auto px-6 py-6 max-w-7xl">
-          {children}
+      {/* Desktop sidebar — hidden on mobile */}
+      <div className="hidden md:flex">
+        <Sidebar />
+      </div>
+
+      {/* Mobile slide-in drawer */}
+      {drawerOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-black/50" onClick={() => setDrawerOpen(false)} />
+          <div className="absolute left-0 top-0 bottom-0">
+            <Sidebar onClose={() => setDrawerOpen(false)} />
+          </div>
         </div>
-      </main>
+      )}
+
+      {/* Content column */}
+      <div className="flex-1 flex flex-col min-h-0">
+        <MobileHeader onMenuClick={() => setDrawerOpen(true)} />
+        <main className="flex-1 overflow-auto">
+          <div className="container mx-auto px-4 md:px-6 py-6 max-w-7xl">
+            {children}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }