68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { DashboardRail } from '@/ui/DashboardRail';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Calendar, Home, Layout, Settings, Trophy, Users } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
export interface GlobalSidebarViewData {}
|
|
|
|
export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{ label: 'Dashboard', href: '/', icon: Home },
|
|
{ label: 'Leagues', href: '/leagues', icon: Trophy },
|
|
{ label: 'Teams', href: '/teams', icon: Users },
|
|
{ label: 'Races', href: '/races', icon: Calendar },
|
|
{ label: 'Leaderboards', href: '/leaderboards', icon: Layout },
|
|
{ label: 'Settings', href: '/settings', icon: Settings },
|
|
];
|
|
|
|
return (
|
|
<DashboardRail>
|
|
<Box py={6}>
|
|
<Box px={6} mb={8}>
|
|
<Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
|
|
NAVIGATION
|
|
</Text>
|
|
</Box>
|
|
<Stack as="nav" flexGrow={1} px={3} direction="col" gap={1}>
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
const Icon = item.icon;
|
|
return (
|
|
<Box
|
|
key={item.href}
|
|
as={Link}
|
|
href={item.href}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
px={3}
|
|
py={2}
|
|
rounded="md"
|
|
transition
|
|
bg={isActive ? 'primary-accent/10' : 'transparent'}
|
|
color={isActive ? 'primary-accent' : 'text-gray-400'}
|
|
hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
|
|
hoverTextColor={isActive ? 'primary-accent' : 'white'}
|
|
group
|
|
>
|
|
<Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />
|
|
<Text weight="medium">{item.label}</Text>
|
|
{isActive && (
|
|
<Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
|
|
)}
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Box>
|
|
</DashboardRail>
|
|
);
|
|
}
|