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

## 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:
2026-06-25 08:09:50 +00:00
committed by Autin
parent c0a3037293
commit 37434fbfc6
6 changed files with 137 additions and 10 deletions
+41
View File
@@ -43,6 +43,37 @@
</div>
</div>
</Variant>
<Variant title="Avec footer (collé en bas)">
<div class="flex h-[600px] border rounded-lg overflow-hidden">
<MalioSidebar
v-model="collapsed3"
:sections="sectionsLong"
>
<template #logo>
<span class="text-2xl font-bold text-m-primary">Malio</span>
</template>
<template #logo-collapsed>
<span class="text-2xl font-bold text-m-primary">M</span>
</template>
<template #footer>
<div class="leading-tight">
<p class="text-[14px] font-semibold text-m-text">Tristan</p>
<p class="text-[12px] text-m-muted">Administrateur</p>
</div>
</template>
<template #footer-collapsed>
<span class="block text-center text-[14px] font-bold text-m-primary">T</span>
</template>
</MalioSidebar>
<div class="flex-1 p-6 bg-white">
<p class="text-m-muted">
Le footer reste collé en bas même quand la nav scrolle.
</p>
</div>
</div>
</Variant>
</Story>
</template>
@@ -94,6 +125,15 @@ entre les deux états.
- Contenu affiché en haut quand la sidebar est pliée.
### footer
- Contenu affiché en bas quand la sidebar est dépliée (profil, déconnexion, version).
- Toujours collé en bas : la nav occupe l'espace restant (`flex-1`) et pousse le footer.
### footer-collapsed
- Contenu affiché en bas quand la sidebar est pliée.
------------------------------------------------------------------------
## Comportement
@@ -127,6 +167,7 @@ import MalioSidebar from '../../components/malio/sidebar/Sidebar.vue'
const collapsed1 = ref(false)
const collapsed2 = ref(false)
const collapsed3 = ref(false)
const sectionsShort = [
{