Fix bug where navigation by other means cause the navbar to not get updated

Author: FooChao

frontend/src/app/components/home/WelcomeComponent.tsx

@@ -3,12 +3,14 @@
 import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useUser } from "@/contexts/UserContext";
+import { useRouter } from "next/navigation";
 
 export default function WelcomePage() {
   const { user } = useUser();
+  const router = useRouter();
 
-  function directToHome() {
-    window.location.href = "/match";
+  function directToMatch() {
+    router.push("/match");
   }
 
   return (
@@ -24,7 +26,7 @@ export default function WelcomePage() {
       <CardContent>
         <Button
           className="w-30 bg-white border-black text-black border-2 border-black"
-          onClick={() => directToHome()}
+          onClick={() => directToMatch()}
         >
           Start
         </Button>

frontend/src/app/components/layout/Navbar.tsx

@@ -1,6 +1,6 @@
 /**
  * AI Assistance Disclosure:
- * Tool: GitHub Copilot (model: Claude 3.5 Sonnet), date: 2025-09-15
+ * Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-15
  * Purpose: To create a reusable navigation bar component for the PeerPrep application.
  * Author Review: I validated correctness, security, and performance of the code.
  *  I modified the styling to match the application's theme.
@@ -9,7 +9,7 @@
 "use client";
 
 import Link from "next/link";
-import { useState } from "react";
+import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { User, LogOut, ChevronDown } from "lucide-react";
@@ -26,7 +26,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 export default function Navbar() {
-  const [activeTab, setActiveTab] = useState("Dashboard");
+  const pathname = usePathname();
   const { user, setUser } = useUser();
   const router = useRouter();
 
@@ -75,9 +75,8 @@ export default function Navbar() {
             <Link
               key={item.name}
               href={item.href}
-              onClick={() => setActiveTab(item.name)}
               className={`px-3 py-2 text-sm font-medium transition-colors ${
-                activeTab === item.name
+                pathname.startsWith(item.href)
                   ? "text-blue-600 border-b-2 border-blue-600"
                   : "text-gray-600 hover:text-blue-600"
               }`}