From 5d38f54317b798999951e84243a486d4afee15d3 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Sun, 8 Feb 2026 22:20:47 +0100
Subject: [PATCH] refactor(NavItem): enhance link highlighting and update
 layout structure

---
 app/components/NavItem.tsx |  5 ++++-
 app/layout.tsx             | 10 ++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/components/NavItem.tsx b/app/components/NavItem.tsx
index 7f4755c..1cab969 100644
--- a/app/components/NavItem.tsx
+++ b/app/components/NavItem.tsx
@@ -1,4 +1,6 @@
+'use client'
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 export default function NavItem({
     children,
@@ -7,7 +9,8 @@ export default function NavItem({
     children: React.ReactNode;
     href: string;
 }>) {
-    return <Link href={href} className="text-lg mx-4 flex">
+    const highlighted = usePathname() === href;
+    return <Link href={href} className={`text-lg mx-4 flex font-semibold ${highlighted && 'underline underline-offset-8'}`}>
         {children}
     </Link>
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 7c4987a..9425a8a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import NavItem from "./components/NavItem";
 import Header from "./components/Header";
 import Image from "next/image";
 import logo from "./logo.png"
+import Link from "next/link";
 
 export const metadata: Metadata = {
   title: "Portfolio - Mike Karl",
@@ -20,13 +21,14 @@ export default function RootLayout({
       <body>
         <Header>
           <Navbar>
-            <NavItem href="/about">About</NavItem>
+            <NavItem href="/">Home</NavItem>
             <NavItem href="/projects">Projekte</NavItem>
+            <NavItem href="/about">About</NavItem>
             <NavItem href="/contact">Kontakt</NavItem>
           </Navbar>
-          <NavItem href="/">
-            <Image alt="logo.png" src={logo} width={70} height={70} />
-          </NavItem>
+          <Link href={"/"}>
+            <Image alt="logo.png" className="mx-4" src={logo} width={70} height={70} />
+          </Link>
         </Header>
         {children}
         <div className="bg" />