karlm/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(NavItem): restructure Link component for improved readability and maintainability

Browse source
This commit is contained in:
Mike Karl 2026-02-13 10:06:48 +01:00
parent 6a3868065c
commit 6d8f2f6e2d
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/components/NavItem.tsx
View file

@ -10,7 +10,16 @@ export default function NavItem({
href: string;
}>) {
const highlighted = usePathname() == href;
return <Link href={href} className={`text-lg mx-4 flex font-semibold ${highlighted ? 'underline underline-offset-8':""} hover:scale-110 active:rotate-4`}>
{children}
return (
<Link
href={href}
className={`group relative text-lg mx-4 flex font-semibold hover:scale-110 active:rotate-4`}
>
<span>{children}</span>
<span
className={`absolute left-0 bottom-0 h-[2px] w-full bg-current transform transition-transform duration-200 origin-left group-hover:scale-x-100 ${highlighted ? 'scale-x-100 scale-y-100' : 'scale-x-0 scale-y-50'}`}
aria-hidden="true"
/>
</Link>
);
}