diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 30d262e..81955de 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -86,15 +86,28 @@ const navItems: NavLink[] = [
       <div class="px-2 pt-3 pb-2 text-[10px] font-semibold uppercase tracking-wider text-donut-muted">
         Navigation
       </div>
+      <!--
+        Pattern v-slot custom : on prend la main sur le rendu du <a> pour
+        styler "actif" différemment selon que l'item est /, où on veut
+        un match exact (sinon "Accueil" serait actif partout vu que `/`
+        est le préfixe de toutes les routes), ou un autre chemin où un
+        match préfixe suffit.
+
+        Le `custom` prop est OBLIGATOIRE quand on remplace l'élément rendu :
+        sans lui, RouterLink rend son propre <a> ET notre slot -> on aurait
+        des liens imbriqués et le clic ne navigue pas. Avec `custom`, c'est
+        nous qui devons câbler @click="navigate".
+      -->
       <RouterLink
         v-for="item in navItems"
         :key="item.to"
         :to="item.to"
-        v-slot="{ isActive, isExactActive }"
+        custom
+        v-slot="{ href, navigate, isActive, isExactActive }"
       >
         <a
-          :href="item.to"
-          @click.prevent
+          :href="href"
+          @click="navigate"
           :class="[
             'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
             (item.to === '/' ? isExactActive : isActive)