From ffc59053096c579532872620bfcaf3900e316a3c Mon Sep 17 00:00:00 2001
From: dmitriylaukhin <laukhin@dementiy.com>
Date: Mon, 8 Jun 2026 09:58:15 +0500
Subject: [PATCH] Make admin/curator sidebar collapsible on mobile

The admin shell sidebar was always fixed at 208px with no mobile
handling, so on phones it covered half the screen with no way to hide
it. Add a hamburger toggle + overlay (mirroring the student course
sidebar): off-canvas on <lg, sticky as before on desktop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/admin/admin-shell.tsx | 40 +++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx
index 8b388be..5e1370b 100644
--- a/src/components/admin/admin-shell.tsx
+++ b/src/components/admin/admin-shell.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
 import { AdminNav } from "@/components/admin/admin-nav";
 import { LogoutButton } from "@/components/layout/logout-button";
 
@@ -10,10 +14,38 @@ export function AdminShell({
   userName: string;
   questionsBadge?: number;
 }) {
+  const [open, setOpen] = useState(false);
+
   return (
     <div className="min-h-screen flex">
+      {/* Mobile hamburger */}
+      <button
+        className="lg:hidden fixed top-3 left-3 z-50 p-2 rounded"
+        style={{
+          backgroundColor: "var(--background)",
+          border: "1.5px solid var(--border)",
+          color: "var(--foreground)",
+        }}
+        onClick={() => setOpen((v) => !v)}
+        aria-label="Меню админки"
+      >
+        {open ? <X size={20} /> : <Menu size={20} />}
+      </button>
+
+      {/* Overlay */}
+      {open && (
+        <div
+          className="lg:hidden fixed inset-0 bg-black/50 z-30"
+          onClick={() => setOpen(false)}
+        />
+      )}
+
       <aside
-        className="w-52 flex flex-col shrink-0 fixed h-full z-10"
+        className={[
+          "w-52 flex flex-col shrink-0 fixed h-full z-40 transition-transform duration-200",
+          "lg:translate-x-0",
+          open ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
+        ].join(" ")}
         style={{ backgroundColor: "var(--sidebar-bg)", color: "var(--sidebar-text)" }}
       >
         <div className="px-5 py-5" style={{ borderBottom: "2px solid var(--sidebar-border)" }}>
@@ -24,7 +56,8 @@ export function AdminShell({
             Администратор
           </p>
         </div>
-        <nav className="flex-1 px-2 py-4 space-y-0.5 overflow-y-auto">
+        {/* Закрываем меню при переходе по ссылке на мобильном */}
+        <nav className="flex-1 px-2 py-4 space-y-0.5 overflow-y-auto" onClick={() => setOpen(false)}>
           <AdminNav questionsBadge={questionsBadge} />
         </nav>
         <div className="px-4 py-4" style={{ borderTop: "2px solid var(--sidebar-border)" }}>
@@ -34,7 +67,8 @@ export function AdminShell({
           <LogoutButton />
         </div>
       </aside>
-      <div className="ml-52 flex-1 min-h-screen" style={{ backgroundColor: "var(--background)" }}>
+
+      <div className="lg:ml-52 flex-1 min-h-screen" style={{ backgroundColor: "var(--background)" }}>
         {children}
       </div>
     </div>