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

@@ -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>