47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { FileText, Heart, Home, LockKeyhole, ShieldCheck, UserRound } from 'lucide-react';
|
|
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 MobileNav({ active }: { active: string }) {
|
|
const { user } = useAuth();
|
|
const items = user?.canAccessAdmin
|
|
? [...baseItems, { href: getAdminLandingPath(user), label: 'Админ', icon: ShieldCheck }]
|
|
: baseItems;
|
|
|
|
return (
|
|
<nav className="fixed inset-x-0 bottom-0 z-50 border-t border-[#eceef4] bg-white/95 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2 backdrop-blur lg:hidden">
|
|
<div className="mx-auto flex max-w-lg items-stretch justify-around gap-1">
|
|
{items.map((item) => {
|
|
const isActive =
|
|
active === item.href || (item.href.startsWith('/admin') && active.startsWith('/admin')) || (item.href === '/family' && active.startsWith('/family'));
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-1 py-1.5 text-[10px] font-medium transition',
|
|
isActive ? 'text-[#3390ec]' : 'text-[#667085]'
|
|
)}
|
|
>
|
|
<item.icon className={cn('h-5 w-5 shrink-0', isActive && 'stroke-[2.25]')} />
|
|
<span className="truncate">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|