diff --git a/frontend/app/component/navbar/NavBar.module.css b/frontend/app/component/navbar/NavBar.module.css
index 4ac078025..2284e76b0 100644
--- 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
index f4566e3cd..4ea1f6d0d 100644
--- 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
index 0e32ad483..a8e980447 100644
--- 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(
-
- {t("election.title.plural")}
- ,
- );
- } else {
- links.push(
-
- {t("election.title.plural")}
- ,
- );
- }
- if (location.pathname.startsWith("/users")) {
- links.push(
-
- {t("users")}
- ,
- );
- } else {
- links.push(
-
- {t("users")}
- ,
- );
- }
- if (location.pathname.startsWith("/workstations")) {
- links.push(
-
- {t("workstations.workstations")}
- ,
- );
- } else {
- links.push(
-
- {t("workstations.workstations")}
- ,
- );
- }
- if (location.pathname.startsWith("/logs")) {
- links.push(
-
- {t("logs")}
- ,
- );
- } else {
- links.push(
-
- {t("logs")}
- ,
- );
- }
-
- return <>{links}>;
+function TopLevelManagementLinks() {
+ return (
+ <>
+ {t("election.title.plural")}
+ {t("users")}
+ {t("workstations.workstations")}
+ {t("logs")}
+ >
+ );
}
export function NavBarLinks({ location }: NavBarLinksProps) {
@@ -138,7 +91,7 @@ export function NavBarLinks({ location }: NavBarLinksProps) {
location.pathname === "/workstations" ||
location.pathname === "/logs"
) {
- return ;
+ return ;
} else {
return <>>;
}