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

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

Browse source
This commit is contained in:
Mike Karl 2026-02-08 22:20:47 +01:00
parent 4e1d55aba1
commit 5d38f54317
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/components/NavItem.tsx
View file

@ -1,4 +1,6 @@
'use client'
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
export default function NavItem({ export default function NavItem({
children, children,
@ -7,7 +9,8 @@ export default function NavItem({
children: React.ReactNode; children: React.ReactNode;
href: string; 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} {children}
</Link> </Link>
} }

10
app/layout.tsx
View file

@ -5,6 +5,7 @@ import NavItem from "./components/NavItem";
import Header from "./components/Header"; import Header from "./components/Header";
import Image from "next/image"; import Image from "next/image";
import logo from "./logo.png" import logo from "./logo.png"
import Link from "next/link";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Portfolio - Mike Karl", title: "Portfolio - Mike Karl",
@ -20,13 +21,14 @@ export default function RootLayout({
<body> <body>
<Header> <Header>
<Navbar> <Navbar>
<NavItem href="/about">About</NavItem> <NavItem href="/">Home</NavItem>
<NavItem href="/projects">Projekte</NavItem> <NavItem href="/projects">Projekte</NavItem>
<NavItem href="/about">About</NavItem>
<NavItem href="/contact">Kontakt</NavItem> <NavItem href="/contact">Kontakt</NavItem>
</Navbar> </Navbar>
<NavItem href="/"> <Link href={"/"}>
<Image alt="logo.png" src={logo} width={70} height={70} /> <Image alt="logo.png" className="mx-4" src={logo} width={70} height={70} />
</NavItem> </Link>
</Header> </Header>
{children} {children}
<div className="bg" /> <div className="bg" />