From 2053f7baef240e339af514071cda2cf334d25faa Mon Sep 17 00:00:00 2001 From: Liam Date: Thu, 18 Apr 2024 11:22:43 +0100 Subject: [PATCH] highlight the current page in the navbar --- src/app/components/href-button.tsx | 10 ++++++++-- src/app/components/navbar.tsx | 17 ++++++++++++++++- src/app/components/theme-toggle-button.tsx | 2 +- src/app/layout.tsx | 2 +- 4 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/app/components/href-button.tsx b/src/app/components/href-button.tsx index e748239..5c65a43 100644 --- a/src/app/components/href-button.tsx +++ b/src/app/components/href-button.tsx @@ -1,3 +1,4 @@ +import { cn } from "@/common/utils"; import Link from "next/link"; import { ReactElement } from "react"; @@ -17,11 +18,16 @@ type ButtonProps = { * open the link in a new tab. */ openInNewTab?: boolean; + + /** + * The class names for the button. + */ + className?: string; }; -export function HrefButton({ title, url, openInNewTab }: ButtonProps): ReactElement { +export function HrefButton({ title, url, openInNewTab, className }: ButtonProps): ReactElement { return ( -
+

{title}

diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx index 1ecf173..c2516ec 100644 --- a/src/app/components/navbar.tsx +++ b/src/app/components/navbar.tsx @@ -1,4 +1,7 @@ +"use client"; + import Link from "next/link"; +import { usePathname } from "next/navigation"; import { ReactElement } from "react"; import { HrefButton } from "./href-button"; import Logo from "./logo"; @@ -30,6 +33,8 @@ const pages: Page[] = [ ]; export default function NavBar(): ReactElement { + const path = usePathname(); + return (
@@ -41,7 +46,17 @@ export default function NavBar(): ReactElement {
{pages.map((page, index) => { - return ; + const isActive = path.includes(page.url); + + return ( + + ); })}
diff --git a/src/app/components/theme-toggle-button.tsx b/src/app/components/theme-toggle-button.tsx index 5f9f683..2b30614 100644 --- a/src/app/components/theme-toggle-button.tsx +++ b/src/app/components/theme-toggle-button.tsx @@ -13,7 +13,7 @@ export function ToggleThemeButton(): ReactElement { onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Toggle Theme" > - {theme === "dark" ? : } + {theme == "dark" ? : } ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 29d0f6f..fd0f5fc 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -51,7 +51,7 @@ export default function RootLayout({ - + {children}