84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { signOut } from "next-auth/react";
|
|
import { LayoutDashboard, Monitor, Bookmark, LogOut, Home } from "lucide-react";
|
|
|
|
const NAV = [
|
|
{ href: "/", icon: LayoutDashboard, label: "Dashboard" },
|
|
{ href: "/system", icon: Monitor, label: "System" },
|
|
{ href: "/bookmarks", icon: Bookmark, label: "Bookmarks" },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<aside className="w-[220px] flex-shrink-0 flex flex-col h-screen" style={{ background: "#0a0a14", borderRight: "1px solid rgba(255,255,255,0.05)" }}>
|
|
{/* Logo */}
|
|
<div className="px-5 py-6" style={{ borderBottom: "1px solid rgba(255,255,255,0.05)" }}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-xl flex items-center justify-center shadow-lg"
|
|
style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)", boxShadow: "0 4px 20px rgba(99,102,241,0.3)" }}>
|
|
<Home className="w-4 h-4 text-white" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-bold text-white">Digital Home</div>
|
|
<div className="text-[10px]" style={{ color: "#475569" }}>Dashboard</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex-1 px-3 py-4 space-y-1">
|
|
{NAV.map(({ href, icon: Icon, label }) => {
|
|
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all"
|
|
style={active ? {
|
|
background: "rgba(99,102,241,0.15)",
|
|
color: "#a5b4fc",
|
|
border: "1px solid rgba(99,102,241,0.25)",
|
|
} : {
|
|
color: "#475569",
|
|
border: "1px solid transparent",
|
|
}}
|
|
onMouseEnter={e => { if (!active) { (e.currentTarget as HTMLElement).style.color = "#94a3b8"; (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)"; } }}
|
|
onMouseLeave={e => { if (!active) { (e.currentTarget as HTMLElement).style.color = "#475569"; (e.currentTarget as HTMLElement).style.background = "transparent"; } }}
|
|
>
|
|
<Icon className="w-4 h-4" style={{ color: active ? "#818cf8" : "inherit" }} />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* User */}
|
|
<div className="px-3 py-4" style={{ borderTop: "1px solid rgba(255,255,255,0.05)" }}>
|
|
<div className="flex items-center gap-3 px-3 py-2 rounded-xl" style={{ background: "rgba(255,255,255,0.03)" }}>
|
|
<div className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
|
|
style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }}>
|
|
D
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-xs font-medium truncate" style={{ color: "#cbd5e1" }}>Daniil</div>
|
|
<div className="text-[10px] truncate" style={{ color: "#334155" }}>Admin</div>
|
|
</div>
|
|
<button
|
|
onClick={() => signOut({ callbackUrl: "/auth/signin" })}
|
|
title="Выйти"
|
|
style={{ color: "#334155" }}
|
|
onMouseEnter={e => (e.currentTarget.style.color = "#f87171")}
|
|
onMouseLeave={e => (e.currentTarget.style.color = "#334155")}
|
|
>
|
|
<LogOut className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|