refactor navbar links

frontend/src/Header.tsx

@@ -1,10 +1,16 @@
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 import { useSession } from "./Session";
 import { useState } from "react";
 
 export default function Header() {
   const { user, teams, setTeams, players, onLogout } = useSession();
   const [burgerActive, setBurgerActive] = useState(false);
+  const location = useLocation();
+  const pages = [
+    { name: "Sociogram", path: "/network" },
+    { name: "MVP", path: "/mvp" },
+    { name: "Team", path: "/team" },
+  ];
   return (
     <nav className="navbar" role="navigation" aria-label="main navigation">
       <div className="navbar-brand">
@@ -39,27 +45,20 @@ export default function Header() {
         {(user?.scopes.includes(`team:${teams?.activeTeam}`) ||
           teams?.activeTeam === 42) && (
           <div className="navbar-start">
+            {pages.map((p) => (
               <Link
                 onClick={() => setBurgerActive(false)}
-              className="navbar-item"
+                className={
-              to="/network"
+                  "navbar-item" +
+                  (location.pathname === p.path
+                    ? " has-text-weight-extrabold"
+                    : "")
+                }
+                to={p.path}
               >
-              <span>Sociogram</span>
+                <span>{p.name}</span>
-            </Link>
-            <Link
-              onClick={() => setBurgerActive(false)}
-              className="navbar-item"
-              to="/mvp"
-            >
-              <span>MVP</span>
-            </Link>
-            <Link
-              onClick={() => setBurgerActive(false)}
-              className="navbar-item"
-              to="/team"
-            >
-              <span>Team</span>
               </Link>
+            ))}
           </div>
         )}
         <div className="navbar-end">