highlight the current page in the navbar

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 (
     <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
       <Link href="/" className="flex items-center gap-2 pl-3 pr-1">
@@ -41,7 +46,17 @@ export default function NavBar(): ReactElement {
 
       <div className="flex gap-4">
         {pages.map((page, index) => {
-          return <HrefButton key={index} title={page.name} url={page.url} openInNewTab={page.openInNewTab} />;
+          const isActive = path.includes(page.url);
+
+          return (
+            <HrefButton
+              className={isActive ? "text-primary" : ""}
+              key={index}
+              title={page.name}
+              url={page.url}
+              openInNewTab={page.openInNewTab}
+            />
+          );
         })}
       </div>