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?

app/(main)/[teamId]/page.js

@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { use } from "react"; // Add this import for React.use()
+import NavBar from "@/components/NavBar";
 
 export default function TeamPage({ params }) {
   const { status, data: session } = useSession();
@@ -276,27 +277,7 @@ export default function TeamPage({ params }) {
       </div>
 
       {/* Replace the outdated navbar with the correct one */}
-      <div className="nav-bar">
-        <Link href="/map" className="nav-item">
-          <div className="nav-icon">🗺️</div>
-          <div className="nav-label">Map</div>
-        </Link>
-        <Link href="/stats" className="nav-item">
-          <div className="nav-icon">📊</div>
-          <div className="nav-label">Stats</div>
-        </Link>
-        <Link
-          href={team ? `/${team.id}` : "/team-selection"}
-          className="nav-item active"
-        >
-          <div className="nav-icon">👥</div>
-          <div className="nav-label">Team</div>
-        </Link>
-        <Link href="/leaderboard" className="nav-item">
-          <div className="nav-icon">🏆</div>
-          <div className="nav-label">Leaderboard</div>
-        </Link>
-      </div>
+      <NavBar activeLink="team" teamData={team} />
 
       <style jsx>{`
         .team-page {
@@ -420,6 +401,7 @@ export default function TeamPage({ params }) {
           width: 100%; /* Use 100% instead of 100vw to prevent overflow issues */
           box-sizing: border-box; /* Include padding in width calculation */
           z-index: 100; /* Ensure navbar is above other content */
+          margin: 0; /* Remove any margin that might be causing the gap */
         }
 
         .nav-item {