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:
@@ -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'"
|
||||
|
||||
Reference in New Issue
Block a user