112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { BrandMark } from '@/ui/BrandMark';
|
|
import { NavLink } from '@/ui/NavLink';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
LayoutGrid,
|
|
Trophy,
|
|
Users,
|
|
Calendar,
|
|
Flag,
|
|
Home,
|
|
ChevronLeft,
|
|
ChevronRight
|
|
} from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useSidebar } from '@/components/layout/SidebarContext';
|
|
|
|
export function AppSidebar() {
|
|
const pathname = usePathname();
|
|
const { isCollapsed, toggleCollapse } = useSidebar();
|
|
|
|
const mainItems = [
|
|
{ label: 'Home', href: routes.public.home, icon: Home },
|
|
{ label: 'Leagues', href: routes.public.leagues, icon: Trophy },
|
|
{ label: 'Drivers', href: routes.public.drivers, icon: Users },
|
|
{ label: 'Teams', href: routes.public.teams, icon: Flag },
|
|
];
|
|
|
|
const competitionItems = [
|
|
{ label: 'Races', href: routes.public.races, icon: Calendar },
|
|
{ label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
|
|
];
|
|
|
|
return (
|
|
<Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out">
|
|
{/* Brand Header */}
|
|
<Box p={6} pb={8} display="flex" alignItems="center" justifyContent={isCollapsed ? 'center' : 'start'}>
|
|
<BrandMark collapsed={isCollapsed} />
|
|
</Box>
|
|
|
|
{/* Navigation */}
|
|
<Box flex={1} px={isCollapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
|
|
<Stack gap={8}>
|
|
<Box>
|
|
{!isCollapsed && (
|
|
<Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
|
|
Platform
|
|
</Text>
|
|
)}
|
|
<Stack gap={3}>
|
|
{mainItems.map((item) => (
|
|
<NavLink
|
|
key={item.href}
|
|
href={item.href}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
isActive={pathname === item.href}
|
|
variant="sidebar"
|
|
collapsed={isCollapsed}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Box>
|
|
{!isCollapsed && (
|
|
<Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
|
|
Competition
|
|
</Text>
|
|
)}
|
|
<Stack gap={3}>
|
|
{competitionItems.map((item) => (
|
|
<NavLink
|
|
key={item.href}
|
|
href={item.href}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
isActive={pathname === item.href}
|
|
variant="sidebar"
|
|
collapsed={isCollapsed}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Bottom Actions */}
|
|
<Box className="h-14 flex items-center px-4 border-t border-white/10">
|
|
<button
|
|
onClick={toggleCollapse}
|
|
className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-start'} gap-2 text-text-low hover:text-text-high transition-colors px-2 py-2 rounded-md hover:bg-white/5 w-full group`}
|
|
title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
|
|
>
|
|
{isCollapsed ? (
|
|
<ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
|
|
) : (
|
|
<>
|
|
<ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
|
|
<Text size="xs" className="font-medium">Collapse</Text>
|
|
</>
|
|
)}
|
|
</button>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|