fix(sidebar) : lien actif sur les sous-routes (match préfixe) + option exact (#81)

## Problème

L'état actif d'un lien Sidebar reposait sur l'`active-class` de NuxtLink, qui dépend de l'imbrication des routes Vue Router. Sur un routing **plat** (typique ERP), `/supplier` n'était plus actif sur `/supplier/1/edit`.

## Solution (option 2 : match par préfixe)

L'actif est désormais calculé côté composant via `useRoute().path` :
- actif si `path === item.to` **ou** `path` commence par `item.to + '/'` → `/supplier` reste actif sur `/supplier/1/edit`, quel que soit le routing du consommateur.
- nouvelle option **`exact: true`** par item pour forcer le match strict (actif uniquement sur la route exacte).

## Tests / doc
- 24 tests Sidebar (route exacte, sous-route préfixe, autres liens non actifs, `exact` strict/exact) — montés avec un router mémoire.
- COMPONENTS.md (type SidebarItem + comportement actif) et CHANGELOG mis à jour.

Branche partie de `develop` (indépendante de la PR #79).

Reviewed-on: #81
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #81.
This commit is contained in:
2026-06-19 13:58:55 +00:00
committed by Autin
parent 5a06cf642f
commit aef1550d7c
4 changed files with 73 additions and 9 deletions
+4 -1
View File
@@ -885,7 +885,10 @@ Barre latérale de navigation rétractable.
| `sidebarClass` | `string` | `''` | Classes CSS sidebar |
| `toggleClass` | `string` | `''` | Classes CSS bouton toggle |
**Type SidebarSection :** `{ title?: string, items: { label: string, icon?: string, to?: string, href?: string, active?: boolean }[] }`
**Type SidebarSection :** `{ label?: string, icon?: string, items: SidebarItem[] }`
**Type SidebarItem :** `{ label: string, to: string, exact?: boolean }`
**Lien actif :** un lien est marqué actif (texte `m-primary` + semi-bold) quand la route courante **est ce lien ou une de ses sous-routes** (match par préfixe) — ex. `/supplier` reste actif sur `/supplier/1/edit`. Mettre `exact: true` sur l'item force le match strict (actif uniquement sur la route exacte). Indépendant de l'imbrication des routes côté consommateur.
**Events :** `update:modelValue(value: boolean)`
**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée)