fixing some styling and component usage issues

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

@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import NavBar from "@/components/NavBar";
 
 export default function TeamPage({ params }) {
   const { status, data: session } = useSession();
@@ -135,6 +136,7 @@ export default function TeamPage({ params }) {
     }
   }, [effectiveTeamId, status, fetchTeamData, router]);
 
+  // Add a function to properly handle the "Continue Hunt" button click
   const continueTreasureHunt = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -390,35 +392,8 @@ export default function TeamPage({ params }) {
         </div>
       )}
 
-      <div className="nav-bar">
-        <div className="nav-item">
-          <Link href="/map" className="nav-item">
-            <div className="nav-icon">🗺️</div>
-            <div className="nav-label">Map</div>
-          </Link>
-        </div>
-        <div className="nav-item">
-          <Link href="/stats" className="nav-item">
-            <div className="nav-icon">📊</div>
-            <div className="nav-label">Stats</div>
-          </Link>
-        </div>
-        <div className="nav-item">
-          <Link
-            href={teamData ? `/${teamData.id}` : "/team-selection"}
-            className="nav-item active"
-          >
-            <div className="nav-icon">👥</div>
-            <div className="nav-label">Team</div>
-          </Link>
-        </div>
-        <div className="nav-item">
-          <Link href="/leaderboard" className="nav-item">
-            <div className="nav-icon">🏆</div>
-            <div className="nav-label">Leaderboard</div>
-          </Link>
-        </div>
-      </div>
+      {/* Replace hardcoded navbar with NavBar component */}
+      <NavBar activeLink="team" teamData={team} />
 
       <style jsx>{`
         .team-page {