refactor(admin): top nav → left sidebar with grouped sections

Top horizontal nav was getting cramped at 8 items. Sidebar:
- 240px fixed left, full-height
- 3 groups: Контент (Статьи / Черновики / Заметки / Зеро),
  Публикации (Каналы / Автогенерация), Система (Настройки)
- Сайт + Выход pinned at bottom
- Mobile: hides off-screen with hamburger toggle + backdrop overlay

Layout: main now pl-60 on md+ (slides under sidebar), no padding on mobile
since sidebar overlays. Content keeps max-w-6xl + mx-auto, so visual layout
on individual pages doesn't change.

app/admin/(protected)/layout.js

@@ -8,8 +8,12 @@ export default async function AdminLayout({ children }) {
   return (
     <div className="min-h-screen bg-stone-50 dark:bg-neutral-950">
       <AdminNav />
-      <main className="max-w-6xl mx-auto px-4 py-8">
+      {/* Отступ слева под фиксированный sidebar (240px = w-60); на мобилке без отступа,
+          sidebar выезжает поверх контента через бэкдроп */}
+      <main className="md:pl-60">
+        <div className="max-w-6xl mx-auto px-4 py-8 pt-14 md:pt-8">
           {children}
+        </div>
       </main>
     </div>
   );

components/admin/AdminNav.js

@@ -1,22 +1,48 @@
 'use client';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import { LayoutDashboard, FileText, Radio, Zap, Settings, LogOut, ExternalLink, MessageCircle, Clock, Coffee } from 'lucide-react';
+import { useState } from 'react';
+import {
+  LayoutDashboard, FileText, Radio, Zap, Settings, LogOut, ExternalLink,
+  MessageCircle, Clock, Coffee, Menu, X,
+} from 'lucide-react';
 
-const NAV = [
+// Группы пунктов меню — масштабируется, без давки сверху
+const GROUPS = [
+  {
+    label: null, // главная без заголовка группы
+    items: [
       { href: '/admin', label: 'Дашборд', icon: LayoutDashboard, exact: true },
+    ],
+  },
+  {
+    label: 'Контент',
+    items: [
       { href: '/admin/articles', label: 'Статьи',     icon: FileText },
       { href: '/admin/drafts',   label: 'Черновики',  icon: Clock },
-  { href: '/admin/channels', label: 'Каналы', icon: Radio },
-  { href: '/admin/autogen', label: 'Автогенерация', icon: Zap },
       { href: '/admin/notes',    label: 'Заметки',    icon: MessageCircle },
       { href: '/admin/zero',     label: 'Зеро',       icon: Coffee },
+    ],
+  },
+  {
+    label: 'Публикации',
+    items: [
+      { href: '/admin/channels', label: 'Каналы',        icon: Radio },
+      { href: '/admin/autogen',  label: 'Автогенерация', icon: Zap },
+    ],
+  },
+  {
+    label: 'Система',
+    items: [
       { href: '/admin/settings', label: 'Настройки', icon: Settings },
+    ],
+  },
 ];
 
 export default function AdminNav() {
   const pathname = usePathname();
   const router = useRouter();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   async function logout() {
     await fetch('/admin/api/logout', { method: 'POST' });
@@ -25,53 +51,95 @@ export default function AdminNav() {
   }
 
   return (
-    <header className="border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+    <>
-      <div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-6">
+      {/* Mobile hamburger button */}
+      <button
+        onClick={() => setMobileOpen(v => !v)}
+        className="md:hidden fixed top-3 left-3 z-50 p-2 rounded-lg bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-sm"
+        aria-label="Открыть меню"
+      >
+        {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+      </button>
+
+      {/* Mobile backdrop */}
+      {mobileOpen && (
+        <div
+          className="md:hidden fixed inset-0 z-30 bg-black/40"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside className={`
+        fixed top-0 left-0 z-40 h-screen w-60 flex flex-col
+        bg-white dark:bg-neutral-900
+        border-r border-neutral-200 dark:border-neutral-800
+        transition-transform duration-200
+        ${mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
+      `}>
         {/* Логотип */}
-        <Link href="/admin" className="flex items-center gap-2 font-bold text-sm text-neutral-900 dark:text-neutral-100 shrink-0">
+        <Link
+          href="/admin"
+          onClick={() => setMobileOpen(false)}
+          className="flex items-center gap-2 font-bold text-sm text-neutral-900 dark:text-neutral-100 px-4 h-14 border-b border-neutral-200 dark:border-neutral-800 shrink-0"
+        >
           <span className="w-7 h-7 rounded-lg bg-emerald-500 text-white flex items-center justify-center text-xs font-bold">Z</span>
           Admin
         </Link>
 
-        {/* Навигация */}
+        {/* Группы навигации */}
-        <nav className="flex items-center gap-1 flex-1">
+        <nav className="flex-1 overflow-y-auto px-2 py-3 space-y-4">
-          {NAV.map(({ href, label, icon: Icon, exact }) => {
+          {GROUPS.map((group, gi) => (
+            <div key={gi}>
+              {group.label && (
+                <div className="text-[10px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 px-2 mb-1.5">
+                  {group.label}
+                </div>
+              )}
+              <div className="space-y-0.5">
+                {group.items.map(({ href, label, icon: Icon, exact }) => {
                   const active = exact ? pathname === href : pathname.startsWith(href);
                   return (
                     <Link
                       key={href}
                       href={href}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                      onClick={() => setMobileOpen(false)}
+                      className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                         active
                           ? 'bg-emerald-50 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-400'
-                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+                          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
                       }`}
                     >
-                <Icon className="w-4 h-4" />
+                      <Icon className="w-4 h-4 shrink-0" />
                       {label}
                     </Link>
                   );
                 })}
+              </div>
+            </div>
+          ))}
         </nav>
 
-        {/* Правая часть */}
+        {/* Footer: Сайт + Logout */}
-        <div className="flex items-center gap-2 shrink-0">
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-2 py-3 space-y-0.5 shrink-0">
           <Link
             href="/"
             target="_blank"
-            className="flex items-center gap-1 text-xs text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+            onClick={() => setMobileOpen(false)}
+            className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
           >
-            <ExternalLink className="w-3.5 h-3.5" />
+            <ExternalLink className="w-4 h-4 shrink-0" />
             Сайт
           </Link>
           <button
             onClick={logout}
-            className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-sm text-neutral-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950 transition-colors"
+            className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-neutral-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950 transition-colors"
           >
-            <LogOut className="w-4 h-4" />
+            <LogOut className="w-4 h-4 shrink-0" />
+            Выход
           </button>
         </div>
-      </div>
+      </aside>
-    </header>
+    </>
   );
 }