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

Ajoute deux slots `footer` et `footer-collapsed` à MalioSidebar pour
afficher un contenu en bas (profil, déconnexion, version…). Le footer
est toujours collé en bas grâce au `flex-1` de la nav et reste visible
quand la liste de liens scrolle. Bordure haute m-primary en mode déplié,
à l'image du bloc logo.

Tests, page playground, story et docs (COMPONENTS + CHANGELOG) mis à jour.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -239,6 +239,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

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

app/story/sidebar/sidebarMenu.story.vue

@@ -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 = [
   {