84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import Link from 'next/link';
|
|
import { LucideIcon, ChevronRight } from 'lucide-react';
|
|
|
|
interface NavLinkProps {
|
|
href: string;
|
|
label: string;
|
|
icon?: LucideIcon;
|
|
isActive?: boolean;
|
|
variant?: 'sidebar' | 'top';
|
|
collapsed?: boolean;
|
|
LinkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; className?: string }>;
|
|
}
|
|
|
|
export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false, LinkComponent = Link as any }: NavLinkProps) {
|
|
const isTop = variant === 'top';
|
|
|
|
// Radical "Game Menu" Style
|
|
// Active: Solid Primary Color, Shadow, Bold.
|
|
// Inactive: Glass card with strong hover effects.
|
|
|
|
const content = (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent={collapsed ? 'center' : 'space-between'}
|
|
gap={collapsed ? 0 : 3}
|
|
paddingX={collapsed ? 2 : 4}
|
|
paddingY={3}
|
|
className={`
|
|
relative transition-all duration-300 ease-out rounded-xl border w-full
|
|
${isActive
|
|
? 'bg-primary-accent border-primary-accent shadow-[0_0_20px_rgba(25,140,255,0.3)]'
|
|
: 'bg-white/5 border-white/5 group-hover:bg-white/15 group-hover:border-white/20 group-hover:shadow-lg group-hover:shadow-white/5'
|
|
}
|
|
${!collapsed && isActive ? 'translate-x-2' : ''}
|
|
${!collapsed && !isActive ? 'group-hover:translate-x-2' : ''}
|
|
`}
|
|
title={collapsed ? label : undefined}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
|
|
{icon && (
|
|
<Icon
|
|
icon={icon}
|
|
size={5} // 20px
|
|
className={`transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
|
|
/>
|
|
)}
|
|
|
|
{!collapsed && (
|
|
<Text
|
|
size="sm"
|
|
weight="bold"
|
|
variant="inherit"
|
|
className={`tracking-wide transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
|
|
>
|
|
{label}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Chevron on Hover/Active - Only when expanded */}
|
|
{!collapsed && (
|
|
<Icon
|
|
icon={ChevronRight}
|
|
size={4}
|
|
className={`transition-all duration-300 ${isActive ? 'text-white opacity-100' : 'text-white opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0'}`}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<LinkComponent
|
|
href={href}
|
|
className={`w-full group block ${!isTop ? '' : ''}`}
|
|
>
|
|
{content}
|
|
</LinkComponent>
|
|
);
|
|
}
|