Use React Router NavLink component

kiesraad · Feb 3, 2025 · 133c0a2 · 133c0a2
1 parent 3a87701
commit 133c0a2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 92 deletions.
diff --git a/frontend/app/component/navbar/NavBar.module.css b/frontend/app/component/navbar/NavBar.module.css
@@ -39,7 +39,7 @@
       padding-left: 0;
     }
 
-    > span:global(.active) {
+    > :global(.active) {
       border-bottom: 4px solid var(--accent-orange);
       padding-bottom: calc(0.5rem - 4px);
       font-weight: bold;

diff --git a/frontend/app/component/navbar/NavBar.test.tsx b/frontend/app/component/navbar/NavBar.test.tsx
@@ -69,44 +69,18 @@ describe("NavBar", () => {
     expect(screen.queryByText("Gemeenteraadsverkiezingen 2026")).toBeVisible();
   });
 
-  test("top level management links for '/elections'", async () => {
+  test.each([
+    { pathname: "/elections", hash: "#administratorcoordinator" },
+    { pathname: "/users", hash: "#administratorcoordinator" },
+    { pathname: "/workstations", hash: "#administratorcoordinator" },
+    { pathname: "/logs", hash: "#administratorcoordinator" },
+  ])("top level management links for $pathname", async () => {
     await renderNavBar({ pathname: "/elections", hash: "#administratorcoordinator" });
 
-    expect(screen.queryByRole("link", { name: "Verkiezingen" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Verkiezingen")).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Gebruikers" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Werkplekken" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
-  });
-
-  test("top level management links for '/users'", async () => {
-    await renderNavBar({ pathname: "/users", hash: "#administratorcoordinator" });
-
-    expect(screen.queryByRole("link", { name: "Verkiezingen" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Gebruikers" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Gebruikers")).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Werkplekken" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
-  });
-
-  test("top level management links for '/workstations'", async () => {
-    await renderNavBar({ pathname: "/workstations", hash: "#administrator" });
-
-    expect(screen.queryByRole("link", { name: "Verkiezingen" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Gebruikers" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Werkplekken" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Werkplekken")).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
-  });
-
-  test("top level management links for '/logs'", async () => {
-    await renderNavBar({ pathname: "/logs", hash: "#administratorcoordinator" });
-
     expect(screen.queryByRole("link", { name: "Verkiezingen" })).toBeVisible();
     expect(screen.queryByRole("link", { name: "Gebruikers" })).toBeVisible();
     expect(screen.queryByRole("link", { name: "Werkplekken" })).toBeVisible();
-    expect(screen.queryByRole("link", { name: "Logs" })).not.toBeInTheDocument();
-    expect(screen.queryByText("Logs")).toBeVisible();
+    expect(screen.queryByRole("link", { name: "Logs" })).toBeVisible();
   });
 
   test.each([

diff --git a/frontend/app/component/navbar/NavBarLinks.tsx b/frontend/app/component/navbar/NavBarLinks.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router";
+import { Link, NavLink } from "react-router";
 
 import { Election, useElection } from "@kiesraad/api";
 import { t } from "@kiesraad/i18n";
@@ -66,62 +66,15 @@ function ElectionManagementLinks({ location }: NavBarLinksProps) {
   }
 }
 
-function TopLevelManagementLinks({ location }: NavBarLinksProps) {
-  const links = [];
-  if (location.pathname.startsWith("/elections")) {
-    links.push(
-      <span key="elections" className="active">
-        {t("election.title.plural")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="elections-link" to={`/elections#administratorcoordinator`}>
-        {t("election.title.plural")}
-      </Link>,
-    );
-  }
-  if (location.pathname.startsWith("/users")) {
-    links.push(
-      <span key="users" className="active">
-        {t("users")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="users-link" to={`/users#administratorcoordinator`}>
-        {t("users")}
-      </Link>,
-    );
-  }
-  if (location.pathname.startsWith("/workstations")) {
-    links.push(
-      <span key="workstations" className="active">
-        {t("workstations.workstations")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="workstations-link" to={`/workstations#administrator`}>
-        {t("workstations.workstations")}
-      </Link>,
-    );
-  }
-  if (location.pathname.startsWith("/logs")) {
-    links.push(
-      <span key="logs" className="active">
-        {t("logs")}
-      </span>,
-    );
-  } else {
-    links.push(
-      <Link key="logs-link" to={`/logs#administratorcoordinator`}>
-        {t("logs")}
-      </Link>,
-    );
-  }
-
-  return <>{links}</>;
+function TopLevelManagementLinks() {
+  return (
+    <>
+      <NavLink to={"/elections"}>{t("election.title.plural")}</NavLink>
+      <NavLink to={"/users"}>{t("users")}</NavLink>
+      <NavLink to={"/workstations"}>{t("workstations.workstations")}</NavLink>
+      <NavLink to={"/logs"}>{t("logs")}</NavLink>
+    </>
+  );
 }
 
 export function NavBarLinks({ location }: NavBarLinksProps) {
@@ -138,7 +91,7 @@ export function NavBarLinks({ location }: NavBarLinksProps) {
     location.pathname === "/workstations" ||
     location.pathname === "/logs"
   ) {
-    return <TopLevelManagementLinks location={location} />;
+    return <TopLevelManagementLinks />;
   } else {
     return <></>;
   }