highlight the current page on the navbar

src/components/Navbar.tsx

@@ -1,22 +1,58 @@
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+interface NavbarProps {
+  currentPath?: string;
+}
+
+export default function Navbar({ currentPath: initialPath = "" }: NavbarProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath);
+
+  useEffect(() => {
+    // Get current path on client-side if not provided or for client-side navigation
+    if (!initialPath) {
+      setCurrentPath(window.location.pathname);
+    }
+  }, [initialPath]);
 
-export default function Navbar() {
   return (
     <>
       <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
         <div>
           <strong className={cn("sm:text-2xl md:text-4xl")}>
-            <a href="/">Resist Tech Monopolies</a>
+            <a href="/">
+            Resist Tech Monopolies
+            </a>
           </strong>
         </div>
         <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
-          <a href="/GetInvolved/" className={cn("text-blue-500")}>
+          <a
+            href="/GetInvolved/"
+            className={cn(
+              "text-blue-500",
+              currentPath.includes("GetInvolved") && "border-b-2 border-blue-500"
+            )}
+          >
             Get Involved
           </a>
-          <a href="/PointsOfUnity/" className={cn("text-green-500")}>
+          {/* <Separator orientation="vertical" className="w-5" /> */}
+          <a
+            href="/PointsOfUnity/"
+            className={cn(
+              "text-green-500",
+              currentPath.includes("PointsOfUnity") && "border-b-2 border-green-500"
+            )}
+          >
             Points of Unity
           </a>
-          <a href="/WhatWereWorkingOn/" className={cn("text-red-500")}>
+          {/* <Separator orientation="vertical" className="w-5" /> */}
+          <a
+            href="/WhatWereWorkingOn/"
+            className={cn(
+              "text-red-500",
+              currentPath.includes("WhatWereWorkingOn") && "border-b-2 border-red-500"
+            )}
+          >
             What We're Working On
           </a>
         </strong>
@@ -25,8 +61,8 @@ export default function Navbar() {
       <div className={cn("flex flex-row justify-between pb-8")}>
         {[
           1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-        ].map(() => (
+        ].map((key) => (
-          <>
+          <div key={key}>
             <a
               href="https://www.flaticon.com/free-icons/computer"
               title="computer icons"
@@ -40,12 +76,12 @@ export default function Navbar() {
             </a>
 
             <a
-              href="https://www.flaticon.com/free-icons/people"
+              href="https://www.flaticon.com/free-icons/peopler"
               title="people icons"
             >
               <img src="/people.png" alt="people icon" width="30" height="30" />
             </a>
-          </>
+          </div>
         ))}
       </div>
     </>

src/pages/GetInvolved.astro

@@ -3,12 +3,15 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Layout from "../layouts/Layout.astro";
 import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load currentPath={currentPath} />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Get Involved</h1>
         

src/pages/PointsOfUnity.astro

@@ -3,12 +3,15 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Layout from "../layouts/Layout.astro";
 import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load currentPath={currentPath} />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Points of Unity</h1>
         <p>

src/pages/WhatWereWorkingOn.astro

@@ -3,12 +3,15 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Layout from "../layouts/Layout.astro";
 import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load currentPath={currentPath} />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">What We're Working On</h1>
         <p>Pihole Workshop</p>

src/pages/index.astro

@@ -3,12 +3,15 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Layout from "@/layouts/Layout.astro";
 import "@/styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load currentPath={currentPath} />
 
       <div class="pl-4 pr-4">
         <p>