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:
+4
-1
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user