From 40b99f3add06bbe6fa9265b59a3f9170ead09cae Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Fri, 18 Sep 2026 06:56:38 +0200
Subject: [PATCH] feat(ui): usable on phones without changing the desktop
 layout

At phone width the sidebar stayed 240px wide, leaving pages a ~135px strip.
Below md it is now hidden behind a menu button in the header and opens as a
drawer (closes on navigation, backdrop, X or Escape); from md up the sidebar
is unchanged. Page wrappers use p-4 on phones and keep p-6/p-8 from md.

Shot detail: on phones the thumbnail takes the full width with the details
below it instead of pushing them off screen, the action buttons wrap, and
the tab bar scrolls sideways. Desktop sizing is kept as it was.

Every change is behind a md: breakpoint, so the desktop layout is the same.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/(dashboard)/clients/[clientId]/page.tsx   |  2 +-
 app/(dashboard)/clients/page.tsx              |  2 +-
 app/(dashboard)/dashboard/page.tsx            |  2 +-
 app/(dashboard)/layout.tsx                    | 23 +++--
 .../pipeline/PipelineQueueClient.tsx          |  2 +-
 .../pipeline/deliveries/DeliveriesClient.tsx  |  2 +-
 .../exports/[exportId]/ExportDetailClient.tsx |  6 +-
 .../pipeline/machines/MachinesClient.tsx      |  2 +-
 app/(dashboard)/projects/[id]/kanban/page.tsx |  2 +-
 app/(dashboard)/projects/[id]/page.tsx        |  2 +-
 .../projects/[id]/shots/[shotId]/page.tsx     | 21 ++--
 app/(dashboard)/projects/page.tsx             |  2 +-
 app/(dashboard)/settings/migration/page.tsx   |  6 +-
 app/(dashboard)/settings/page.tsx             |  2 +-
 .../settings/storage-test/page.tsx            |  2 +-
 .../shot-status/ShotStatusClient.tsx          |  2 +-
 app/(dashboard)/tasks/TasksPageClient.tsx     |  2 +-
 app/(dashboard)/users/page.tsx                |  2 +-
 components/layout/Header.tsx                  | 15 ++-
 components/layout/MobileNav.tsx               | 20 ++++
 components/layout/Sidebar.tsx                 | 96 ++++++++++++++-----
 21 files changed, 148 insertions(+), 67 deletions(-)
 create mode 100644 components/layout/MobileNav.tsx

diff --git a/app/(dashboard)/clients/[clientId]/page.tsx b/app/(dashboard)/clients/[clientId]/page.tsx
index 59eab72..d2fb7c5 100644
--- a/app/(dashboard)/clients/[clientId]/page.tsx
+++ b/app/(dashboard)/clients/[clientId]/page.tsx
@@ -59,7 +59,7 @@ export default async function ClientDetailPage({
   };
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       {/* Back */}
       <Link
         href="/clients"
diff --git a/app/(dashboard)/clients/page.tsx b/app/(dashboard)/clients/page.tsx
index 1735171..11f0011 100644
--- a/app/(dashboard)/clients/page.tsx
+++ b/app/(dashboard)/clients/page.tsx
@@ -26,7 +26,7 @@ export default async function ClientsPage() {
   const clients = await getClients();
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 2b17342..59e8cec 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -161,7 +161,7 @@ export default async function DashboardPage() {
   } = await getDashboardData(session.user.id, session.user.role);
 
   return (
-    <div className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       <div className="mb-4">
         <h1 className="text-3xl font-bold text-white">Dashboard</h1>
         <p className="text-zinc-400 mt-1">
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index a4aab3f..deed769 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -2,6 +2,7 @@ import { auth } from "@/auth";
 import { redirect } from "next/navigation";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { Header } from "@/components/layout/Header";
+import { MobileNavProvider } from "@/components/layout/MobileNav";
 
 export default async function DashboardLayout({
   children,
@@ -12,18 +13,20 @@ export default async function DashboardLayout({
   if (!session?.user) redirect("/login");
 
   return (
-    <div className="flex h-screen bg-zinc-950 overflow-hidden print:block print:h-auto print:overflow-visible">
-      <div className="print:hidden">
-        <Sidebar />
-      </div>
-      <div className="flex-1 flex flex-col overflow-hidden print:block print:overflow-visible">
+    <MobileNavProvider>
+      <div className="flex h-screen bg-zinc-950 overflow-hidden print:block print:h-auto print:overflow-visible">
         <div className="print:hidden">
-          <Header />
+          <Sidebar />
+        </div>
+        <div className="flex-1 flex flex-col overflow-hidden print:block print:overflow-visible">
+          <div className="print:hidden">
+            <Header />
+          </div>
+          <main className="flex-1 overflow-auto print:overflow-visible">
+            {children}
+          </main>
         </div>
-        <main className="flex-1 overflow-auto print:overflow-visible">
-          {children}
-        </main>
       </div>
-    </div>
+    </MobileNavProvider>
   );
 }
diff --git a/app/(dashboard)/pipeline/PipelineQueueClient.tsx b/app/(dashboard)/pipeline/PipelineQueueClient.tsx
index af71b92..fef1e75 100644
--- a/app/(dashboard)/pipeline/PipelineQueueClient.tsx
+++ b/app/(dashboard)/pipeline/PipelineQueueClient.tsx
@@ -150,7 +150,7 @@ export function PipelineQueueClient({ projects, initialStatus = "all" }: Props)
   const lastRow = pagination ? Math.min(pagination.page * PAGE_SIZE, pagination.total) : 0;
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-semibold text-white">Render Queue</h1>
diff --git a/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx b/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx
index 11a97fb..4cf8e71 100644
--- a/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx
+++ b/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx
@@ -140,7 +140,7 @@ export function DeliveriesClient({ canBuild }: { canBuild: boolean }) {
   const shown = episode ? episodes.filter((e) => e.episode === episode) : episodes;
 
   return (
-    <div className="p-6 space-y-6 max-w-6xl">
+    <div className="p-4 md:p-6 space-y-6 max-w-6xl">
       <div className="flex items-center gap-3">
         <Link href="/pipeline">
           <Button variant="ghost" size="icon-sm">
diff --git a/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx b/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx
index ba54937..4507beb 100644
--- a/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx
+++ b/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx
@@ -155,10 +155,10 @@ export function ExportDetailClient({ exportId }: { exportId: string }) {
     }
   }
 
-  if (isLoading) return <div className="p-6 text-zinc-500">Loading…</div>;
+  if (isLoading) return <div className="p-4 md:p-6 text-zinc-500">Loading…</div>;
   if (error || !data) {
     return (
-      <div className="p-6 text-red-400">
+      <div className="p-4 md:p-6 text-red-400">
         {(error as Error)?.message ?? "Export not found"}
       </div>
     );
@@ -180,7 +180,7 @@ export function ExportDetailClient({ exportId }: { exportId: string }) {
   ];
 
   return (
-    <div className="p-6 space-y-6 max-w-5xl">
+    <div className="p-4 md:p-6 space-y-6 max-w-5xl">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div className="flex items-center gap-3">
           <Link href="/pipeline">
diff --git a/app/(dashboard)/pipeline/machines/MachinesClient.tsx b/app/(dashboard)/pipeline/machines/MachinesClient.tsx
index 8a61e86..10d2341 100644
--- a/app/(dashboard)/pipeline/machines/MachinesClient.tsx
+++ b/app/(dashboard)/pipeline/machines/MachinesClient.tsx
@@ -76,7 +76,7 @@ export function MachinesClient() {
   const machines = data?.machines ?? [];
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <div className="flex items-center gap-3">
         <Link href="/pipeline">
           <Button variant="ghost" size="icon-sm">
diff --git a/app/(dashboard)/projects/[id]/kanban/page.tsx b/app/(dashboard)/projects/[id]/kanban/page.tsx
index e8cad07..ac344cc 100644
--- a/app/(dashboard)/projects/[id]/kanban/page.tsx
+++ b/app/(dashboard)/projects/[id]/kanban/page.tsx
@@ -69,7 +69,7 @@ export default async function KanbanPage({
   ]);
 
   return (
-    <div className="p-6 space-y-6 max-w-[1800px] mx-auto">
+    <div className="p-4 md:p-6 space-y-6 max-w-[1800px] mx-auto">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <Link href="/projects" className="hover:text-foreground transition-colors">
diff --git a/app/(dashboard)/projects/[id]/page.tsx b/app/(dashboard)/projects/[id]/page.tsx
index b110ca6..22ccb76 100644
--- a/app/(dashboard)/projects/[id]/page.tsx
+++ b/app/(dashboard)/projects/[id]/page.tsx
@@ -123,7 +123,7 @@ export default async function ProjectPage({ params }: { params: Promise<{ id: st
   const doneTasks = project.tasks.filter((t) => t.status === "DONE").length;
 
   return (
-    <div className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm text-zinc-500">
         <Link href="/projects" className="hover:text-white transition-colors">
diff --git a/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx b/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx
index 1f54b54..0e049c2 100644
--- a/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx
+++ b/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx
@@ -230,7 +230,7 @@ export default function ShotDetailPage() {
   const { Icon: StatusIcon } = statusCfg;
 
   return (
-    <div className="p-6 space-y-6 max-w-[1400px] mx-auto">
+    <div className="p-4 md:p-6 space-y-6 max-w-[1400px] mx-auto">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <Link href="/projects" className="hover:text-foreground transition-colors">
@@ -245,7 +245,9 @@ export default function ShotDetailPage() {
       </div>
 
       {/* Header */}
-      <div className="flex items-start  gap-6">
+      {/* Phones: back button, then a full-width thumbnail, then the details
+          below it. From md: one row, as on desktop. */}
+      <div className="flex flex-wrap md:flex-nowrap items-start gap-4 md:gap-6">
         {/* Thumbnail – cinema scope 2.39:1 */}
         <Button variant="ghost" size="icon" asChild className="-ml-2 h-8 w-8">
               <Link href={`/projects/${params.id}`}>
@@ -253,7 +255,7 @@ export default function ShotDetailPage() {
               </Link>
             </Button>
         {shotThumbnail(shot) && (
-          <div className="relative flex-shrink-0 w-72 aspect-[2.39] rounded-lg overflow-hidden border border-border">
+          <div className="relative flex-shrink-0 w-full md:w-72 aspect-[2.39] rounded-lg overflow-hidden border border-border">
             
             <Image
               src={shotThumbnail(shot)!}
@@ -263,10 +265,10 @@ export default function ShotDetailPage() {
             />
           </div>
         )}
-        <div className="space-y-2">
-          <div className="flex items-center gap-3">
-            
-            <h1 className="text-2xl font-bold font-mono">{shot.shotCode}</h1>
+        <div className="space-y-2 min-w-0 w-full md:w-auto md:min-w-min">
+          <div className="flex flex-wrap items-center gap-3">
+
+            <h1 className="text-2xl font-bold font-mono break-all md:break-normal">{shot.shotCode}</h1>
 
             {/* Shot version badge — click to edit for managers */}
             {canManage ? (
@@ -424,7 +426,7 @@ export default function ShotDetailPage() {
         )}
 
         {canManage && (
-          <div className="ml-auto shrink-0 flex items-center gap-2">
+          <div className="ml-auto shrink-0 flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto">
             {/* Internal approval action */}
             {canInternallyApprove && shot.shotApprovalStatus === "PENDING" && (
               <Button
@@ -510,7 +512,8 @@ export default function ShotDetailPage() {
 
       {/* Tabs */}
       <div>
-        <div className="flex border-b border-border mb-5">
+        {/* Phones: five tabs are wider than the screen, so the bar scrolls sideways. */}
+        <div className="flex border-b border-border mb-5 overflow-x-auto overflow-y-hidden md:overflow-visible [&>button]:shrink-0 [&>button]:whitespace-nowrap">
           <button
             onClick={() => setActiveTab("tasks")}
             className={cn(
diff --git a/app/(dashboard)/projects/page.tsx b/app/(dashboard)/projects/page.tsx
index 04744b6..0d32595 100644
--- a/app/(dashboard)/projects/page.tsx
+++ b/app/(dashboard)/projects/page.tsx
@@ -48,7 +48,7 @@ export default function ProjectsPage() {
   useScrollMemory("projects", pageRef, !isLoading);
 
   return (
-    <div ref={pageRef} className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div ref={pageRef} className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       <div className="flex items-center justify-between gap-4 mb-8">
         <div>
           <h1 className="text-3xl font-bold text-white">Projects</h1>
diff --git a/app/(dashboard)/settings/migration/page.tsx b/app/(dashboard)/settings/migration/page.tsx
index 9e65120..292ed95 100644
--- a/app/(dashboard)/settings/migration/page.tsx
+++ b/app/(dashboard)/settings/migration/page.tsx
@@ -186,7 +186,7 @@ export default function MigrationPage() {
 
   if (fetchError) {
     return (
-      <div className="p-6 max-w-2xl">
+      <div className="p-4 md:p-6 max-w-2xl">
         <div className="flex items-center gap-2 text-sm text-red-400 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2">
           <AlertCircle className="h-4 w-4 shrink-0" />
           {fetchError}
@@ -200,7 +200,7 @@ export default function MigrationPage() {
 
   if (!hetznerConfigured) {
     return (
-      <div className="p-6 max-w-2xl">
+      <div className="p-4 md:p-6 max-w-2xl">
         <div className="flex items-center gap-2 text-sm text-amber-400 rounded-md border border-amber-500/20 bg-amber-500/10 px-3 py-2">
           <AlertCircle className="h-4 w-4 shrink-0" />
           Hetzner object storage is not configured. Set{" "}
@@ -217,7 +217,7 @@ export default function MigrationPage() {
   const allFilteredSelected = filtered.length > 0 && filtered.every((f) => selected.has(f.key));
 
   return (
-    <div className="p-6 space-y-4 max-w-5xl">
+    <div className="p-4 md:p-6 space-y-4 max-w-5xl">
       {/* Header */}
       <div className="flex items-start justify-between gap-4">
         <div>
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
index 8408e1d..4937e78 100644
--- a/app/(dashboard)/settings/page.tsx
+++ b/app/(dashboard)/settings/page.tsx
@@ -19,7 +19,7 @@ export default async function SettingsPage() {
   const hetznerConfig = isAdmin ? await getHetznerConfig() : null;
 
   return (
-    <div className="p-6 space-y-6 max-w-2xl mx-auto">
+    <div className="p-4 md:p-6 space-y-6 max-w-2xl mx-auto">
       <h1 className="text-2xl font-bold">Account Settings</h1>
 
       <Card>
diff --git a/app/(dashboard)/settings/storage-test/page.tsx b/app/(dashboard)/settings/storage-test/page.tsx
index 49682e5..99394f4 100644
--- a/app/(dashboard)/settings/storage-test/page.tsx
+++ b/app/(dashboard)/settings/storage-test/page.tsx
@@ -72,7 +72,7 @@ export default function StorageTestPage() {
   };
 
   return (
-    <div className="p-6 max-w-3xl space-y-6">
+    <div className="p-4 md:p-6 max-w-3xl space-y-6">
       <div>
         <h1 className="text-xl font-semibold">Object Storage Playback Test</h1>
         <p className="text-sm text-muted-foreground mt-1">
diff --git a/app/(dashboard)/shot-status/ShotStatusClient.tsx b/app/(dashboard)/shot-status/ShotStatusClient.tsx
index eead873..2c7d82f 100644
--- a/app/(dashboard)/shot-status/ShotStatusClient.tsx
+++ b/app/(dashboard)/shot-status/ShotStatusClient.tsx
@@ -1124,7 +1124,7 @@ export function ShotStatusClient({
   const selectionCount = selectedIds.size;
 
   return (
-    <div ref={pageRef} className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div ref={pageRef} className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       {/* Header */}
       <div>
         <h1 className="text-3xl font-bold text-white">Shot Status</h1>
diff --git a/app/(dashboard)/tasks/TasksPageClient.tsx b/app/(dashboard)/tasks/TasksPageClient.tsx
index 7aed323..2878240 100644
--- a/app/(dashboard)/tasks/TasksPageClient.tsx
+++ b/app/(dashboard)/tasks/TasksPageClient.tsx
@@ -110,7 +110,7 @@ export function TasksPageClient({
   };
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/app/(dashboard)/users/page.tsx b/app/(dashboard)/users/page.tsx
index 9b9e665..28f5c13 100644
--- a/app/(dashboard)/users/page.tsx
+++ b/app/(dashboard)/users/page.tsx
@@ -32,7 +32,7 @@ export default async function UsersPage() {
   }));
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       <div className="flex items-center gap-3">
         <div className="w-10 h-10 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-center justify-center shrink-0">
           <Users className="h-5 w-5 text-amber-400" />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 8200686..8f13472 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -12,8 +12,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { NotificationBell } from "@/components/notifications/NotificationBell";
 import { getInitials } from "@/lib/utils";
-import { LogOut, User, Settings } from "lucide-react";
+import { LogOut, User, Settings, Menu } from "lucide-react";
 import Link from "next/link";
+import { useMobileNav } from "@/components/layout/MobileNav";
 
 interface HeaderProps {
   title?: string;
@@ -23,11 +24,21 @@ interface HeaderProps {
 export function Header({ title, breadcrumbs }: HeaderProps) {
   const { data: session } = useSession();
   const user = session?.user;
+  const { setOpen: setMobileNavOpen } = useMobileNav();
 
   return (
-    <header className="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-950 px-6">
+    <header className="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-950 px-4 md:px-6">
       {/* Left: Title / Breadcrumbs */}
       <div className="flex items-center gap-2 min-w-0">
+        {/* Phones only: the sidebar is hidden below md and opens as a drawer. */}
+        <button
+          type="button"
+          onClick={() => setMobileNavOpen(true)}
+          className="md:hidden -ml-2 rounded-md p-2 text-zinc-400 hover:bg-zinc-800 hover:text-white"
+          aria-label="Open menu"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
         {breadcrumbs ? (
           <nav className="flex items-center gap-1.5 text-sm">
             {breadcrumbs.map((crumb, i) => (
diff --git a/components/layout/MobileNav.tsx b/components/layout/MobileNav.tsx
new file mode 100644
index 0000000..0a5f2db
--- /dev/null
+++ b/components/layout/MobileNav.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+
+/**
+ * Open/closed state of the phone-width navigation drawer, shared between the
+ * Header (which has the menu button) and the Sidebar (which is the drawer).
+ * At md and up the sidebar is always visible and this state is unused.
+ */
+const MobileNavContext = createContext<{ open: boolean; setOpen: (open: boolean) => void }>({
+  open: false,
+  setOpen: () => {},
+});
+
+export function MobileNavProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return <MobileNavContext.Provider value={{ open, setOpen }}>{children}</MobileNavContext.Provider>;
+}
+
+export const useMobileNav = () => useContext(MobileNavContext);
diff --git a/components/layout/Sidebar.tsx b/components/layout/Sidebar.tsx
index fe8ce51..0609433 100644
--- a/components/layout/Sidebar.tsx
+++ b/components/layout/Sidebar.tsx
@@ -22,10 +22,12 @@ import {
   Clapperboard,
   LayoutGrid,
   Server,
+  X,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSession } from 'next-auth/react';
 import { Button } from '@/components/ui/button';
+import { useMobileNav } from '@/components/layout/MobileNav';
 
 const navItems = [
   { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -54,17 +56,76 @@ const montserrat = Montserrat({
 
 export function Sidebar() {
   const pathname = usePathname();
-  const { data: session } = useSession();
   const [collapsed, setCollapsed] = useState(false);
+  const { open: mobileOpen, setOpen: setMobileOpen } = useMobileNav();
+
+  // Picking a page closes the phone drawer; so does Escape.
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname, setMobileOpen]);
+  useEffect(() => {
+    if (!mobileOpen) return;
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setMobileOpen(false);
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [mobileOpen, setMobileOpen]);
+
+  return (
+    <>
+      {/* md and up: the sidebar exactly as before. */}
+      <aside
+        className={cn(
+          'hidden md:flex flex-col border-r border-zinc-800 bg-zinc-900 transition-all duration-200',
+          collapsed ? 'w-16' : 'w-60',
+        )}
+      >
+        <SidebarContent collapsed={collapsed} />
+        {/* Collapse toggle */}
+        <div className="border-t border-zinc-800 p-2">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="w-full"
+            onClick={() => setCollapsed(!collapsed)}
+            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            {collapsed ? (
+              <ChevronRight className="h-4 w-4" />
+            ) : (
+              <ChevronLeft className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </aside>
+
+      {/* Phones: the same navigation as a drawer, opened from the header. */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setMobileOpen(false)} />
+          <aside className="absolute inset-y-0 left-0 flex w-64 max-w-[80vw] flex-col overflow-y-auto border-r border-zinc-800 bg-zinc-900">
+            <button
+              type="button"
+              onClick={() => setMobileOpen(false)}
+              className="absolute right-2 top-2 rounded-md p-2 text-zinc-400 hover:bg-zinc-800 hover:text-white"
+              aria-label="Close menu"
+            >
+              <X className="h-4 w-4" />
+            </button>
+            <SidebarContent collapsed={false} />
+          </aside>
+        </div>
+      )}
+    </>
+  );
+}
+
+function SidebarContent({ collapsed }: { collapsed: boolean }) {
+  const pathname = usePathname();
+  const { data: session } = useSession();
   const isAdmin = ['ADMIN', 'PRODUCER'].includes(session?.user?.role ?? '');
 
   return (
-    <aside
-      className={cn(
-        'flex flex-col border-r border-zinc-800 bg-zinc-900 transition-all duration-200',
-        collapsed ? 'w-16' : 'w-60',
-      )}
-    >
+    <>
       {/* Logo */}
       <div
         className={cn(
@@ -119,23 +180,6 @@ export function Sidebar() {
           );
         })}
       </nav>
-
-      {/* Collapse toggle */}
-      <div className="border-t border-zinc-800 p-2">
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="w-full"
-          onClick={() => setCollapsed(!collapsed)}
-          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          {collapsed ? (
-            <ChevronRight className="h-4 w-4" />
-          ) : (
-            <ChevronLeft className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
-    </aside>
+    </>
   );
 }