Simplify top nav: 2 links + gear menu for settings

Nav down to Заявки (renamed from Дашборд) + Статистика. Telegram/Почта/
Виджет moved into a gear-icon dropdown next to the theme toggle instead
of competing for space in the horizontal nav row.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH
This commit is contained in:
ogrechkoandClaude Sonnet 5 committed 2026-07-26 15:24:26 +00:00
1 parent cda92de9d2
commit 7947633709
3 files changed
+67 -5

No files matched your search

+2
View File
@@ -4,6 +4,7 @@ import { getCurrentSession } from "@/lib/auth/session";
import { LogoutButton } from "./logout-button"; import { LogoutButton } from "./logout-button";
import { NavLinks } from "./nav-links"; import { NavLinks } from "./nav-links";
import { ThemeToggle } from "./theme-toggle"; import { ThemeToggle } from "./theme-toggle";
import { SettingsMenu } from "./settings-menu";
export default async function AdminLayout({ children }: { children: React.ReactNode }) { export default async function AdminLayout({ children }: { children: React.ReactNode }) {
const session = await getCurrentSession(); const session = await getCurrentSession();
@@ -23,6 +24,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
</div> </div>
<div className="ml-auto flex items-center gap-2 sm:gap-3"> <div className="ml-auto flex items-center gap-2 sm:gap-3">
<span className="hidden text-sm text-text-muted sm:inline">{session.user.name}</span> <span className="hidden text-sm text-text-muted sm:inline">{session.user.name}</span>
<SettingsMenu />
<ThemeToggle /> <ThemeToggle />
<LogoutButton /> <LogoutButton />
</div> </div>
+2 -5
View File
@@ -2,14 +2,11 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { LayoutDashboard, BarChart3, Send, Mail, Code2 } from "lucide-react"; import { LayoutDashboard, BarChart3 } from "lucide-react";
const links = [ const links = [
{ href: "/dashboard", label: "Дашборд", icon: LayoutDashboard }, { href: "/dashboard", label: "Заявки", icon: LayoutDashboard },
{ href: "/stats", label: "Статистика", icon: BarChart3 }, { href: "/stats", label: "Статистика", icon: BarChart3 },
{ href: "/settings/telegram", label: "Telegram", icon: Send },
{ href: "/settings/email", label: "Почта", icon: Mail },
{ href: "/settings/widget", label: "Виджет", icon: Code2 },
]; ];
export function NavLinks() { export function NavLinks() {
+63
View File
@@ -0,0 +1,63 @@
"use client";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Settings, Send, Mail, Code2 } from "lucide-react";
const items = [
{ href: "/settings/telegram", label: "Telegram", icon: Send },
{ href: "/settings/email", label: "Почта", icon: Mail },
{ href: "/settings/widget", label: "Виджет", icon: Code2 },
];
export function SettingsMenu() {
const [open, setOpen] = useState(false);
const pathname = usePathname();
const rootRef = useRef<HTMLDivElement>(null);
useEffect(() => {
function onClickOutside(e: MouseEvent) {
if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
setOpen(false);
}
}
document.addEventListener("mousedown", onClickOutside);
return () => document.removeEventListener("mousedown", onClickOutside);
}, []);
const isActive = items.some((item) => pathname.startsWith(item.href));
return (
<div ref={rootRef} className="relative">
<button
onClick={() => setOpen((v) => !v)}
className={`btn btn-ghost ${isActive ? "bg-accent-soft text-accent-soft-text" : ""}`}
title="Настройки"
aria-label="Настройки"
>
<Settings size={15} />
</button>
{open && (
<div className="card absolute right-0 top-full z-20 mt-2 w-44 overflow-hidden p-1">
{items.map(({ href, label, icon: Icon }) => {
const active = pathname.startsWith(href);
return (
<Link
key={href}
href={href}
onClick={() => setOpen(false)}
className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
active ? "bg-accent-soft text-accent-soft-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
}`}
>
<Icon size={15} />
{label}
</Link>
);
})}
</div>
)}
</div>
);
}