69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface NavLinkProps {
|
|
href: string;
|
|
label: string;
|
|
icon?: LucideIcon;
|
|
isActive?: boolean;
|
|
variant?: 'sidebar' | 'top';
|
|
}
|
|
|
|
export function NavLink({ href, label, icon, isActive, variant = 'sidebar' }: NavLinkProps) {
|
|
const isTop = variant === 'top';
|
|
|
|
// Dieter Rams style: Unobtrusive, Honest, Thorough.
|
|
// No glows. No shadows. Just clear contrast and alignment.
|
|
|
|
const content = (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
paddingX={isTop ? 4 : 4}
|
|
paddingY={isTop ? 2 : 3}
|
|
className={`
|
|
relative group transition-all duration-200 ease-out
|
|
${isActive
|
|
? 'text-text-high bg-white/5'
|
|
: 'text-text-med hover:text-text-high hover:bg-white/5'
|
|
}
|
|
${!isTop && 'rounded-md mx-2'}
|
|
`}
|
|
>
|
|
{icon && (
|
|
<Icon
|
|
icon={icon}
|
|
size={4}
|
|
className={`transition-colors duration-200 ${isActive ? 'text-primary-accent' : 'text-text-low group-hover:text-text-med'}`}
|
|
/>
|
|
)}
|
|
|
|
<Text
|
|
size="sm"
|
|
weight={isActive ? 'medium' : 'normal'}
|
|
variant="inherit"
|
|
className="tracking-wide"
|
|
>
|
|
{label}
|
|
</Text>
|
|
|
|
{/* Minimal Active Indicator */}
|
|
{!isTop && isActive && (
|
|
<Box
|
|
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-primary-accent rounded-r-full"
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Link href={href} variant="inherit" underline="none" block={!isTop}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|