From 16792ed0ce46b0bb5a1b5f8a9e911635c3085abd Mon Sep 17 00:00:00 2001
From: Douglas Duteil <douglasduteil@gmail.com>
Date: Fri, 4 Oct 2024 18:10:19 +0200
Subject: [PATCH] feat(ui): active page indicator (#573)

---
 .../~/app/layout/src/__snapshots__/main.test.tsx.snap    | 2 +-
 packages/~/app/layout/src/main.tsx                       | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/~/app/layout/src/__snapshots__/main.test.tsx.snap b/packages/~/app/layout/src/__snapshots__/main.test.tsx.snap
index 7e30fc19..f4a98bd2 100644
--- a/packages/~/app/layout/src/__snapshots__/main.test.tsx.snap
+++ b/packages/~/app/layout/src/__snapshots__/main.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`Main Layout 1`] = `
         "
         class="flex min-h-screen flex-col"
       >
-        <div class="flex flex-1 flex-col"><div class="flex min-h-full flex-grow flex-col"><header role="banner" class="fr-header"><div class="fr-header__body"><div class="fr-container"><div class="fr-header__body-row"><div class="fr-header__brand fr-enlarge-link"><div class="fr-header__brand-top"><div class="fr-header__logo"><p class="fr-logo">République<br/>Française</p></div></div><div class="fr-header__service"><a href="/" title="Accueil "><p class="fr-header__service-title">Hyyypertool</p></a><p class="fr-header__service-tagline">hyyyyyyyypertool</p></div></div><div class="fr-header__tools"><div class="fr-header__tools-links"><ul class="fr-btns-group"><li><a class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-fi-logout-box-r-line fr-btn--icon-left" href="/auth/logout">Lara Croft</a></li></ul></div></div></div></div></div><div class="fr-header__menu fr-modal"><div class="fr-container"><nav class="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal"><ul class="fr-nav__list"><li class="fr-nav__item"><a class="fr-nav__link" href="/moderations" target="_self">Moderations</a></li><li class="fr-nav__item"><a class="fr-nav__link" href="/users" target="_self">Utilisateurs</a></li><li class="fr-nav__item"><a class="fr-nav__link" href="/organizations" target="_self">Organisations</a></li><li class="fr-nav__item"><a class="fr-nav__link" href="/organizations/domains" target="_self">Domaines à verifier</a></li></ul></nav></div></div></header><div class="relative flex flex-1 flex-col">✅</div></div></div>
+        <div class="flex flex-1 flex-col"><div class="flex min-h-full flex-grow flex-col"><header role="banner" class="fr-header"><div class="fr-header__body"><div class="fr-container"><div class="fr-header__body-row"><div class="fr-header__brand fr-enlarge-link"><div class="fr-header__brand-top"><div class="fr-header__logo"><p class="fr-logo">République<br/>Française</p></div></div><div class="fr-header__service"><a href="/" title="Accueil "><p class="fr-header__service-title">Hyyypertool</p></a><p class="fr-header__service-tagline">hyyyyyyyypertool</p></div></div><div class="fr-header__tools"><div class="fr-header__tools-links"><ul class="fr-btns-group"><li><a class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-fi-logout-box-r-line fr-btn--icon-left" href="/auth/logout">Lara Croft</a></li></ul></div></div></div></div></div><div class="fr-header__menu fr-modal"><div class="fr-container"><nav class="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal"><ul class="fr-nav__list"><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/moderations" target="_self">Moderations</a></li><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/users" target="_self">Utilisateurs</a></li><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/organizations" target="_self">Organisations</a></li><li class="fr-nav__item"><a aria-current="false" class="fr-nav__link" href="/organizations/domains" target="_self">Domaines à verifier</a></li></ul></nav></div></div></header><div class="relative flex flex-1 flex-col">✅</div></div></div>
         <footer class="container mx-auto flex flex-row justify-between p-2">
           <div>© 2222 🇫🇷</div>
           <a
diff --git a/packages/~/app/layout/src/main.tsx b/packages/~/app/layout/src/main.tsx
index 40278a78..a2370b61 100644
--- a/packages/~/app/layout/src/main.tsx
+++ b/packages/~/app/layout/src/main.tsx
@@ -83,6 +83,8 @@ function Tools({ username }: { username?: string | undefined }) {
 }
 
 function Nav() {
+  const { req } = useRequestContext();
+
   return (
     <nav
       class="fr-nav"
@@ -93,6 +95,7 @@ function Nav() {
       <ul class="fr-nav__list">
         <li class="fr-nav__item">
           <a
+            aria-current={req.routePath.startsWith("/moderations")}
             class="fr-nav__link"
             href={urls.moderations.$url().pathname}
             target="_self"
@@ -102,6 +105,7 @@ function Nav() {
         </li>
         <li class="fr-nav__item">
           <a
+            aria-current={req.routePath.startsWith("/users")}
             class="fr-nav__link"
             href={urls.users.$url().pathname}
             target="_self"
@@ -111,6 +115,10 @@ function Nav() {
         </li>
         <li class="fr-nav__item">
           <a
+            aria-current={
+              req.routePath.startsWith("/organizations") &&
+              !req.routePath.startsWith("/organizations/domains")
+            }
             class="fr-nav__link"
             href={urls.organizations.$url().pathname}
             target="_self"
@@ -120,6 +128,7 @@ function Nav() {
         </li>
         <li class="fr-nav__item">
           <a
+            aria-current={req.routePath.startsWith("/organizations/domains")}
             class="fr-nav__link"
             href={urls.organizations.domains.$url().pathname}
             target="_self"