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
+16 -2
View File
@@ -49,14 +49,14 @@
<li
v-for="item in section.items"
:key="item.to"
:class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary pt-1 pb-1'"
:class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary'"
>
<NuxtLink
:to="item.to"
active-class="!text-m-primary font-semibold"
:class="twMerge(
'block truncate text-[15px] leading-[150%]',
collapsed ? 'px-3 text-center' : 'pl-[32px]',
collapsed ? 'px-3 text-center' : 'pl-[32px] py-1',
isActive(item) ? '!text-m-primary font-semibold' : '',
)"
>
@@ -67,6 +67,20 @@
</div>
</nav>
<div
v-if="$slots.footer || $slots['footer-collapsed']"
:class="['px-[20px] py-[14px]', collapsed ? '' : 'mx-[10px] border-t-2 border-m-primary']"
>
<slot
v-if="collapsed"
name="footer-collapsed"
/>
<slot
v-else
name="footer"
/>
</div>
<button
type="button"
:aria-label="collapsed ? 'Déplier le menu' : 'Plier le menu'"