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.
This commit is contained in:
Aleksei Pavlov
+108
-40
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user