77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
Handshake,
|
|
Palette,
|
|
Settings,
|
|
Trophy,
|
|
User
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
|
|
|
|
export function ProfileSidebarTemplate({ viewData: _viewData }: { viewData: ProfileLayoutViewData }) {
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{ label: 'Overview', href: routes.protected.profile, icon: User },
|
|
{ label: 'Leagues', href: routes.protected.profileLeagues, icon: Trophy },
|
|
{ label: 'Liveries', href: routes.protected.profileLiveries, icon: Palette },
|
|
{ label: 'Sponsorships', href: routes.protected.profileSponsorshipRequests, icon: Handshake },
|
|
{ label: 'Settings', href: routes.protected.profileSettings, icon: Settings },
|
|
];
|
|
|
|
return (
|
|
<Box width="240px" flexShrink={0}>
|
|
<Stack gap={1}>
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link key={item.href} href={item.href}>
|
|
<Box
|
|
px={4}
|
|
py={2.5}
|
|
rounded="md"
|
|
backgroundColor={isActive ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
|
|
color={isActive ? '#198CFF' : '#9ca3af'}
|
|
transition
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
cursor="pointer"
|
|
border
|
|
borderColor={isActive ? 'rgba(25, 140, 255, 0.2)' : 'transparent'}
|
|
>
|
|
<Icon icon={item.icon} size={4} color={isActive ? '#198CFF' : '#9ca3af'} />
|
|
<Text
|
|
size="sm"
|
|
weight={isActive ? 'bold' : 'medium'}
|
|
color={isActive ? '#198CFF' : '#9ca3af'}
|
|
>
|
|
{item.label}
|
|
</Text>
|
|
{isActive && (
|
|
<Box
|
|
ml="auto"
|
|
width="4px"
|
|
height="4px"
|
|
rounded="full"
|
|
backgroundColor="#198CFF"
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Link>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|