Add mobile sidebar toggle for admin panel

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>
+  );
+}