From adbd651350f331d7e310c1b1b902b9ce63445f3a Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 13 Jul 2026 19:17:27 +0200
Subject: [PATCH] Add mobile sidebar toggle for admin panel

---
 src/app/admin/layout.tsx                      |  6 +-
 src/components/admin/admin-mobile-wrapper.tsx | 59 +++++++++++++++++++
 2 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/components/admin/admin-mobile-wrapper.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 3aed70b9..28d030e2 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import { getTranslations } from "next-intl/server";
 import { AdminNavLink } from "@/components/admin/admin-nav-link";
+import { AdminMobileWrapper } from "@/components/admin/admin-mobile-wrapper";
 import { requireStaff } from "@/lib/admin/guard";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -163,13 +164,12 @@ export default async function AdminLayout({ children }: { children: ReactNode })
   }
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--admin-canvas)]">
-      <Sidebar staff={staff} />
+    <AdminMobileWrapper sidebar={<Sidebar staff={staff} />}>
       <div className="flex flex-col min-w-0 p-5 lg:p-6">
         <Topbar staff={staff} />
         <section className="admin-page flex-1">{children}</section>
       </div>
-    </div>
+    </AdminMobileWrapper>
   );
 }
 
diff --git a/src/components/admin/admin-mobile-wrapper.tsx b/src/components/admin/admin-mobile-wrapper.tsx
new file mode 100644
index 00000000..332567c3
--- /dev/null
+++ b/src/components/admin/admin-mobile-wrapper.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useState, useEffect, type ReactNode } from "react";
+import { Menu, X } from "lucide-react";
+
+export function AdminMobileWrapper({
+  sidebar,
+  children,
+}: {
+  sidebar: ReactNode;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open]);
+
+  return (
+    <div className="min-h-screen bg-[var(--admin-canvas)] flex flex-col lg:flex-row">
+      {/* Mobile header */}
+      <div className="lg:hidden sticky top-0 z-50 flex items-center gap-3 px-4 py-3 border-b" style={{ backgroundColor: "var(--admin-sidebar-background)", borderColor: "var(--admin-border)" }}>
+        <button
+          type="button"
+          onClick={() => setOpen(!open)}
+          className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-black/10"
+          style={{ color: "var(--admin-text-muted)" }}
+        >
+          {open ? <X size={18} /> : <Menu size={18} />}
+        </button>
+        <span className="text-sm font-bold" style={{ color: "var(--admin-sidebar-text-readable)" }}>Admin Panel</span>
+      </div>
+
+      {/* Backdrop */}
+      {open && (
+        <div className="fixed inset-0 z-40 lg:hidden bg-black/50" onClick={() => setOpen(false)} />
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
+          open ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        {sidebar}
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-col flex-1 min-w-0">
+        {children}
+      </div>
+    </div>
+  );
+}