MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(sidebar) : slots footer / footer-collapsed collés en bas (#86)

Browse Source 
## Contexte
Ajoute la possibilité d'avoir un footer dans `MalioSidebar` (profil, déconnexion, version…), demandé pour les apps consommatrices.

## Changements
- **Slots `footer` / `footer-collapsed`** sur `MalioSidebar`, sur le même pattern que `logo` / `logo-collapsed`.
- Footer **toujours collé en bas** : la nav (`flex-1`) le pousse vers le bas, il reste visible quand la liste de liens scrolle. Pas de prop nécessaire.
- Bordure haute `m-primary` en mode déplié, à l'image du bloc logo. Bloc rendu uniquement si un slot est fourni.

## Tests & doc
- 4 tests ajoutés (footer déplié, footer-collapsed, ordre après la nav, absence de conteneur sans slot).
- Page playground + variante story « Avec footer ».
- `COMPONENTS.md` et `CHANGELOG.md` mis à jour.

Suite complète verte (1055 tests), lint OK.

> ℹ️ Branche nommée MUI-47 (sujet boutons) réutilisée pour ce correctif/ajout sidebar.

Reviewed-on: #86
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #86.
This commit is contained in:
Autin
2026-06-25 08:09:50 +00:00
committed by Autin
parent c0a3037293
commit 37434fbfc6
6 changed files with 137 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
COMPONENTS.md
+5 -1
View File
@@ -893,12 +893,16 @@ Barre latérale de navigation rétractable.
**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)
**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée), `footer` (bas, sidebar ouverte), `footer-collapsed` (bas, sidebar fermée)
Le footer est **toujours collé en bas** : la nav occupe l'espace restant (`flex-1`) et pousse le footer vers le bas, qui reste visible même quand la liste de liens scrolle.
```vue
<MalioSidebar v-model="isOpen" :sections="menuSections">
<template #logo><img src="/logo.png" /></template>
<template #logo-collapsed><img src="/logo-small.png" /></template>
<template #footer><UserProfile /></template>
<template #footer-collapsed><Icon name="mdi:account" /></template>
</MalioSidebar>
```