From 362b3c57121f6b83c2bfcf9d87ffb8cdb6fa2296 Mon Sep 17 00:00:00 2001
From: Arnaud <dupleix@gmail.com>
Date: Thu, 28 May 2026 22:14:09 +0200
Subject: [PATCH] fix(sidebar): liens de nav ne naviguaient pas (RouterLink
 v-slot sans custom)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le pattern <RouterLink v-slot="..."><a @click.prevent>...</a></RouterLink>
sans le prop `custom` rend DEUX <a> imbriqués : celui de RouterLink (qui gère
la navigation) + celui du slot. Notre @click.prevent sur le <a> interne
bloquait le clic avant qu'il remonte au <a> externe. Résultat : clic mort.

Fix : ajout du prop `custom` (RouterLink ne rend plus son <a>) +
@click="navigate" (fonction fournie par le v-slot qui fait le router.push
en gérant les modifier keys, le ctrl-clic, etc.).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/AppSidebar.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

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)