refactor(NavItem): enhance link highlighting and update layout structure

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>
 }

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" />