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>

app/components/malio/sidebar/Sidebar.test.ts

@@ -107,19 +107,24 @@ describe('MalioSidebar', () => {
     expect(links[2].attributes('href')).toBe('/fournisseurs')
   })
 
-  it('hover : fond + couleur + semi-bold tous portés par le <li> (texte non figé sur le <a>)', () => {
+  it('hover : fond + couleur + semi-bold portés par le <li>', () => {
     const wrapper = mountComponent({sections})
     const li = wrapper.find('li')
     expect(li.classes()).toContain('hover:bg-m-primary/10')
     expect(li.classes()).toContain('hover:text-m-primary')
     expect(li.classes()).toContain('hover:font-semibold')
     expect(li.classes()).toContain('text-black')
-    expect(li.classes()).toContain('pt-1')
-    expect(li.classes()).toContain('pb-1')
-    // Le <a> ne fige PAS sa couleur (sinon le texte resterait noir sur les bandes
-    // pt-1/pb-1 hors du <a> alors que le fond du <li> est bleu).
-    expect(wrapper.find('a').classes()).not.toContain('text-black')
-    expect(wrapper.find('a').classes()).not.toContain('hover:text-m-primary')
+  })
+
+  it('zone cliquable : le padding vertical est sur le <a>, pas sur le <li> (pas de bande morte au survol)', () => {
+    const wrapper = mountComponent({sections})
+    // Le padding vertical doit appartenir à la cible de clic (<a>) pour que toute
+    // la bande survolée soit cliquable — sinon pt-1/pb-1 sur le <li> crée une
+    // bande colorée mais non cliquable en haut et en bas du lien.
+    const li = wrapper.find('li')
+    expect(li.classes()).not.toContain('pt-1')
+    expect(li.classes()).not.toContain('pb-1')
+    expect(wrapper.find('a').classes()).toContain('py-1')
   })
 
   it('actif : route exacte → lien en primary + semi-bold, sans fond', () => {
@@ -239,6 +244,43 @@ describe('MalioSidebar', () => {
     expect(wrapper.find('img[alt="M"]').exists()).toBe(true)
   })
 
+  it('renders footer slot when expanded', () => {
+    const wrapper = mountComponent({sections}, {
+      footer: '<a href="/logout">Déconnexion</a>',
+    })
+    expect(wrapper.find('a[href="/logout"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Déconnexion')
+  })
+
+  it('renders footer-collapsed slot when collapsed', async () => {
+    const wrapper = mountComponent({sections}, {
+      'footer-collapsed': '<span>FC</span>',
+    })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.text()).toContain('FC')
+  })
+
+  it('footer is rendered after the nav (pushed to the bottom)', () => {
+    const wrapper = mountComponent({sections}, {
+      footer: '<span class="ft">Footer</span>',
+    })
+    const children = wrapper.find('aside').element.children
+    const navIndex = Array.from(children).findIndex(el => el.tagName === 'NAV')
+    const footerEl = wrapper.find('.ft').element
+    const footerWrapperIndex = Array.from(children).findIndex(el => el.contains(footerEl))
+    expect(footerWrapperIndex).toBeGreaterThan(navIndex)
+  })
+
+  it('does not render a footer container when no footer slot is provided', () => {
+    const wrapper = mountComponent({sections})
+    // Seuls le bloc logo et le <nav> sont des conteneurs (+ le bouton toggle).
+    // Aucun div de footer ne doit apparaître après le <nav>.
+    const children = Array.from(wrapper.find('aside').element.children)
+    const navIndex = children.findIndex(el => el.tagName === 'NAV')
+    const after = children.slice(navIndex + 1)
+    expect(after.some(el => el.tagName === 'DIV')).toBe(false)
+  })
+
   it('uses custom id when provided', () => {
     const wrapper = mountComponent({sections, id: 'my-sidebar'})
     expect(wrapper.find('aside').attributes('id')).toBe('my-sidebar')

app/components/malio/sidebar/Sidebar.vue

@@ -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'"