From 0b4895bb9781673cb42a964006c78359e6f5cff0 Mon Sep 17 00:00:00 2001
From: Aleksei Pavlov <aleksei@umnybayt.ru>
Date: Fri, 19 Jun 2026 11:45:24 +0300
Subject: [PATCH] =?UTF-8?q?refactor(admin):=20top=20nav=20=E2=86=92=20left?=
 =?UTF-8?q?=20sidebar=20with=20grouped=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 +-
 components/admin/AdminNav.js    | 148 +++++++++++++++++++++++---------
 2 files changed, 114 insertions(+), 42 deletions(-)

diff --git a/app/admin/(protected)/layout.js b/app/admin/(protected)/layout.js
index cc11ada..50d5750 100644
--- a/app/admin/(protected)/layout.js
+++ b/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">
-        {children}
+      {/* Отступ слева под фиксированный 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>
   );
diff --git a/components/admin/AdminNav.js b/components/admin/AdminNav.js
index 0dbda34..677505e 100644
--- a/components/admin/AdminNav.js
+++ b/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 = [
-  { href: '/admin', label: 'Дашборд', icon: LayoutDashboard, exact: true },
-  { 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 },
-  { href: '/admin/settings', label: 'Настройки', icon: Settings },
+// Группы пунктов меню — масштабируется, без давки сверху
+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/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.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 ${
-                  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'
-                }`}
-              >
-                <Icon className="w-4 h-4" />
-                {label}
-              </Link>
-            );
-          })}
+        {/* Группы навигации */}
+        <nav className="flex-1 overflow-y-auto px-2 py-3 space-y-4">
+          {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}
+                      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-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 shrink-0" />
+                      {label}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
         </nav>
 
-        {/* Правая часть */}
-        <div className="flex items-center gap-2 shrink-0">
+        {/* Footer: Сайт + Logout */}
+        <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>
-    </header>
+      </aside>
+    </>
   );
 }