fix(sidebar): liens de nav ne naviguaient pas (RouterLink v-slot sans custom)
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>
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user