Fixed issue with map not loading, making SVG dynamically altered depending on the number of clues. then linking that to the clue pages

Grey = cant click
Red = current
Green = complete
blue = skipped?

components/NavBar.js

@@ -0,0 +1,90 @@
+"use client";
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import styles from "@/app/(main)/map/map.module.css";
+
+export default function NavBar({ activeLink, teamData }) {
+  const [huntActive, setHuntActive] = useState(null);
+  const router = useRouter();
+
+  // Check if hunt is active
+  useEffect(() => {
+    const checkHuntStatus = async () => {
+      try {
+        const timestamp = Date.now();
+        const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            "Cache-Control": "no-store, no-cache, must-revalidate",
+            Pragma: "no-cache",
+          },
+          credentials: "include",
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          setHuntActive(data.active);
+        }
+      } catch (err) {
+        console.error("Failed to check hunt status:", err);
+      }
+    };
+
+    checkHuntStatus();
+  }, []);
+
+  // Handle map link click
+  const handleMapClick = (e) => {
+    if (huntActive === false) {
+      e.preventDefault();
+      router.push("/waiting");
+    }
+  };
+
+  return (
+    <nav className={styles["nav-bar"]}>
+      <Link
+        href="/map"
+        className={`${styles["nav-item"]} ${
+          activeLink === "map" ? styles["active"] : ""
+        }`}
+        onClick={handleMapClick}
+      >
+        <div className={styles["nav-icon"]}>🗺️</div>
+        <div className={styles["nav-label"]}>Map</div>
+      </Link>
+
+      <Link
+        href="/stats"
+        className={`${styles["nav-item"]} ${
+          activeLink === "stats" ? styles["active"] : ""
+        }`}
+      >
+        <div className={styles["nav-icon"]}>📊</div>
+        <div className={styles["nav-label"]}>Stats</div>
+      </Link>
+
+      <Link
+        href={teamData?.team ? `/${teamData.team.id}` : "/team-selection"}
+        className={`${styles["nav-item"]} ${
+          activeLink === "team" ? styles["active"] : ""
+        }`}
+      >
+        <div className={styles["nav-icon"]}>👥</div>
+        <div className={styles["nav-label"]}>Team</div>
+      </Link>
+
+      <Link
+        href="/leaderboard"
+        className={`${styles["nav-item"]} ${
+          activeLink === "leaderboard" ? styles["active"] : ""
+        }`}
+      >
+        <div className={styles["nav-icon"]}>🏆</div>
+        <div className={styles["nav-label"]}>Leaderboard</div>
+      </Link>
+    </nav>
+  );
+}