feat(admin): add sidebar navigation with Accueil and Référents links

- Create AdminNavigation component with DSFR sidemenu pattern
- Update admin layout to include sidebar + content grid
- Remove duplicate fr-container from AdminHomePage

Author: LucasCharrier

packages/app/src/app/admin/layout.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 
+import { AdminNavigation } from "~/modules/admin";
 import { auth } from "~/server/auth";
 
 export default async function AdminLayout({
@@ -18,5 +19,14 @@ export default async function AdminLayout({
 		redirect("/mon-espace");
 	}
 
-	return <>{children}</>;
+	return (
+		<div className="fr-container fr-py-4w">
+			<div className="fr-grid-row fr-grid-row--gutters">
+				<div className="fr-col-12 fr-col-md-3">
+					<AdminNavigation />
+				</div>
+				<div className="fr-col-12 fr-col-md-9">{children}</div>
+			</div>
+		</div>
+	);
 }

packages/app/src/modules/admin/AdminHomePage.tsx

@@ -5,13 +5,13 @@ type Props = {
 
 export function AdminHomePage({ userName, userEmail }: Props) {
 	return (
-		<div className="fr-container fr-py-6w">
+		<>
 			<h1 className="fr-h1">Backoffice</h1>
 			<p className="fr-text--lead">Bienvenue, {userName}.</p>
 			<p>
 				Vous êtes connecté en tant qu'administrateur avec l'adresse{" "}
 				<strong>{userEmail}</strong>.
 			</p>
-		</div>
+		</>
 	);
 }

packages/app/src/modules/admin/AdminNavigation.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const ADMIN_LINKS = [
+	{ href: "/admin", label: "Accueil" },
+	{ href: "/admin/liste-referents", label: "Référents" },
+] as const;
+
+export function AdminNavigation() {
+	const pathname = usePathname() ?? "";
+
+	return (
+		<nav aria-label="Menu administration" className="fr-sidemenu">
+			<div className="fr-sidemenu__inner">
+				<button
+					aria-controls="fr-sidemenu-wrapper"
+					aria-expanded="false"
+					className="fr-sidemenu__btn"
+					type="button"
+				>
+					Administration
+				</button>
+				<div className="fr-collapse" id="fr-sidemenu-wrapper">
+					<ul className="fr-sidemenu__list">
+						{ADMIN_LINKS.map(({ href, label }) => {
+							const isCurrent =
+								href === "/admin"
+									? pathname === "/admin"
+									: pathname.startsWith(href);
+							return (
+								<li
+									className={`fr-sidemenu__item ${isCurrent ? "fr-sidemenu__item--active" : ""}`}
+									key={href}
+								>
+									<Link
+										aria-current={isCurrent ? "page" : undefined}
+										className="fr-sidemenu__link"
+										href={href}
+									>
+										{label}
+									</Link>
+								</li>
+							);
+						})}
+					</ul>
+				</div>
+			</div>
+		</nav>
+	);
+}

packages/app/src/modules/admin/__tests__/AdminNavigation.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { usePathname } from "next/navigation";
+import { describe, expect, it, vi } from "vitest";
+
+import { AdminNavigation } from "../AdminNavigation";
+
+describe("AdminNavigation", () => {
+	it("renders navigation with all links", () => {
+		vi.mocked(usePathname).mockReturnValue("/admin");
+		render(<AdminNavigation />);
+		expect(
+			screen.getByRole("navigation", { name: "Menu administration" }),
+		).toBeInTheDocument();
+		expect(screen.getByText("Accueil")).toBeInTheDocument();
+		expect(screen.getByText("Référents")).toBeInTheDocument();
+	});
+
+	it("marks the admin home as active on /admin", () => {
+		vi.mocked(usePathname).mockReturnValue("/admin");
+		render(<AdminNavigation />);
+		const homeLink = screen.getByText("Accueil");
+		expect(homeLink).toHaveAttribute("aria-current", "page");
+	});
+
+	it("marks referents as active on /admin/liste-referents", () => {
+		vi.mocked(usePathname).mockReturnValue("/admin/liste-referents");
+		render(<AdminNavigation />);
+		const refLink = screen.getByText("Référents");
+		expect(refLink).toHaveAttribute("aria-current", "page");
+		const homeLink = screen.getByText("Accueil");
+		expect(homeLink).not.toHaveAttribute("aria-current");
+	});
+});

packages/app/src/modules/admin/index.ts

@@ -1 +1,3 @@
 export { AdminHomePage } from "./AdminHomePage";
+export { AdminNavigation } from "./AdminNavigation";
+export { AdminReferentsPage } from "./referents";