Scrum 109 indicate currently active view on the sidebar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "granda-front",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

src/components/tournament/dashboard/DashSide.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   LucideBetweenHorizontalStart,
   LucideCastle,
@@ -16,6 +18,7 @@ import {
 import { ComponentType } from "react";
 import { Link } from "@/i18n/navigation";
 import "@/i18n/language-utils";
+import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { DebatecoreLogo } from "@/components/debatecore/DebatecoreLogo";
 import { GrandaLogo } from "@/components/debatecore/GrandaLogo";
@@ -41,14 +44,22 @@ type DashSidebarLinks = {
   links: DashSideLink[];
 }[];
 
-const DashSide = ({
-  tournament_path,
-  path_highlight,
-}: {
-  tournament_path: string;
-  path_highlight?: string;
-}) => {
+const DashSide = ({ tournament_path }: { tournament_path: string }) => {
   const t = useTranslations("dash");
+  const currentPathname = usePathname() ?? "";
+
+  const matchPaths = (str: string, target: string) => {
+    const getParam = (p: string) => {
+      const parts = p.split(
+        /\/t\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/,
+      );
+      if (parts.length < 2) return undefined;
+      return parts[1].replace(/^\/|\/$/g, "").split("/")[0];
+    };
+
+    const s = getParam(str);
+    return s !== undefined && s === getParam(target);
+  };
 
   const links: DashSidebarLinks = [
     {
@@ -175,13 +186,15 @@ const DashSide = ({
 
               {category.links.map((link) => {
                 const Icon = link.icon;
-                const isHighlighted = link.name === path_highlight;
+                const isHighlighted = matchPaths(currentPathname, link.href);
 
                 return (
                   <Link
                     key={link.name}
-                    className={`flex flex-row items-center gap-2 rounded border border-transparent px-2 py-1 text-stone-200 hover:border-stone-700 hover:bg-stone-700/25 focus:border-stone-700 focus:bg-stone-700/25 ${
-                      isHighlighted ? "bg-stone-700/15" : ""
+                    className={`flex flex-row items-center gap-2 rounded border px-2 py-1.5 text-stone-200 hover:border-stone-700 hover:bg-stone-700/25 ${
+                      isHighlighted
+                        ? "bg-stone-700/25 border-stone-600"
+                        : "border-transparent"
                     } ${link.disabled ? "opacity-35" : ""}`}
                     href={link.disabled ? "" : link.href}
                     aria-disabled={link.disabled === true}

test/e2e/sidebarHighlight.test.ts

@@ -0,0 +1,27 @@
+import { expect } from "@playwright/test";
+import { testInTournamentAsAdmin } from "./e2eUtils";
+
+testInTournamentAsAdmin(
+  "sidebar highlights the current page",
+  async ({ page }) => {
+    // GIVEN
+    const overviewSidebarItem = page.getByRole("link", { name: "Overview" });
+    const tournamentSidebarItem = page.getByRole("link", {
+      name: "Tournament Ladder",
+    });
+    const debatesSidebarItem = page.getByRole("link", { name: "Debates" });
+
+    await expect(overviewSidebarItem).toHaveClass(/border-stone-600/);
+    await expect(tournamentSidebarItem).not.toHaveClass(/border-stone-600/);
+    await expect(debatesSidebarItem).not.toHaveClass(/border-stone-600/);
+
+    // WHEN
+    await tournamentSidebarItem.click();
+
+    // THEN
+    await page.waitForURL(/\/en\/t\/[^/]+\/ladder$/);
+    await expect(overviewSidebarItem).not.toHaveClass(/border-stone-600/);
+    await expect(tournamentSidebarItem).toHaveClass(/border-stone-600/);
+    await expect(debatesSidebarItem).not.toHaveClass(/border-stone-600/);
+  },
+);