From 6d8f2f6e2d5dcb319e4f1e33259c7de10f0f043e Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Fri, 13 Feb 2026 10:06:48 +0100
Subject: [PATCH] refactor(NavItem): restructure Link component for improved
 readability and maintainability

---
 app/components/NavItem.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/components/NavItem.tsx b/app/components/NavItem.tsx
index 807e3da..cd85040 100644
--- a/app/components/NavItem.tsx
+++ b/app/components/NavItem.tsx
@@ -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}
-    </Link>
+    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>
+    );
 }
\ No newline at end of file