61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { FileText, Heart, Home, LockKeyhole, LogOut, ShieldCheck, UserRound } from 'lucide-react';
|
||
import { FamilySidebarPanel } from '@/components/family/family-sidebar-panel';
|
||
import { BrandLogo } from '@/components/id/brand-logo';
|
||
import { cn } from '@/lib/utils';
|
||
import { getAdminLandingPath } from '@/lib/admin-access';
|
||
import { useAuth } from './auth-provider';
|
||
|
||
const baseItems = [
|
||
{ href: '/', label: 'Главная', icon: Home },
|
||
{ href: '/data', label: 'Данные', icon: UserRound },
|
||
{ href: '/documents', label: 'Документы', icon: FileText },
|
||
{ href: '/family', label: 'Семья', icon: Heart },
|
||
{ href: '/security', label: 'Безопасность', icon: LockKeyhole }
|
||
];
|
||
|
||
export function Sidebar({ active }: { active: string }) {
|
||
const { logout, user } = useAuth();
|
||
const items = user?.canAccessAdmin
|
||
? [...baseItems, { href: getAdminLandingPath(user), label: 'Админка', icon: ShieldCheck }]
|
||
: baseItems;
|
||
|
||
return (
|
||
<aside className="fixed left-0 top-0 hidden h-screen w-[200px] flex-col justify-between border-r border-[#eceef4] bg-white px-3 py-7 text-[13px] lg:flex">
|
||
<div className="flex min-h-0 flex-1 flex-col">
|
||
<Link href="/" className="mb-7 block">
|
||
<BrandLogo size="lg" variant="dark" />
|
||
</Link>
|
||
<nav className="space-y-1.5">
|
||
{items.map((item) => (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className={cn(
|
||
'flex items-center gap-2 rounded-xl px-3 py-2 text-[#1f2430] hover:bg-[#f4f5f8]',
|
||
(active === item.href || (item.href.startsWith('/admin') && active.startsWith('/admin'))) && 'bg-[#f4f5f8]'
|
||
)}
|
||
>
|
||
<item.icon className="h-4 w-4" />
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
<div className="min-h-0 flex-1 overflow-hidden">
|
||
<FamilySidebarPanel />
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2 text-[11px] text-[#667085]">
|
||
{user ? <p className="truncate font-medium text-[#1f2430]">{user.displayName}</p> : null}
|
||
<button type="button" onClick={logout} className="flex items-center gap-2 rounded-lg px-2 py-1 text-[#1f2430] hover:bg-[#f4f5f8]">
|
||
<LogOut className="h-3.5 w-3.5" />
|
||
Выйти
|
||
</button>
|
||
<p>© 2026</p>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|