From 7b37a61192d7982638e1c6ce8bdbadcc83121518 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 21 May 2026 17:11:18 +0200
Subject: [PATCH] docs : exemple de footer fixed bottom dans le playground du
 Drawer

---
 .playground/pages/composant/drawer/drawer.vue | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/.playground/pages/composant/drawer/drawer.vue b/.playground/pages/composant/drawer/drawer.vue
index f7a32c9..0c2cbe5 100644
--- a/.playground/pages/composant/drawer/drawer.vue
+++ b/.playground/pages/composant/drawer/drawer.vue
@@ -4,6 +4,7 @@ import { ref } from 'vue'
 const drawerRight = ref(false)
 const drawerLeft = ref(false)
 const drawerForm = ref(false)
+const drawerFixedFooter = ref(false)
 const drawerNoDismiss = ref(false)
 </script>
 
@@ -52,6 +53,28 @@ const drawerNoDismiss = ref(false)
       </MalioDrawer>
     </div>
 
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Avec footer fixed bottom</h2>
+      <MalioButton label="Ouvrir (footer fixe)" variant="tertiary" @click="drawerFixedFooter = true" />
+      <MalioDrawer v-model="drawerFixedFooter">
+        <template #header>
+          <h2 class="text-[24px] font-bold text-black">Conditions</h2>
+        </template>
+        <!-- pb-24 : laisse la place au footer fixe qui sort du flux et recouvrirait le bas du contenu -->
+        <div class="flex flex-col gap-4 pb-24">
+          <p v-for="n in 12" :key="n" class="text-m-text">
+            Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que le footer reste fixé en bas du viewport.
+          </p>
+        </div>
+        <template #footer>
+          <!-- fixed : positionné par rapport au viewport ; w-full max-w-md cale la largeur sur le drawer droite par défaut -->
+          <div class="fixed bottom-0 right-0 w-full max-w-md border-t border-m-border bg-white px-5 py-4">
+            <MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
+          </div>
+        </template>
+      </MalioDrawer>
+    </div>
+
     <div class="rounded-lg border p-6">
       <h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
       <MalioButton label="Ouvrir" variant="danger" @click="drawerNoDismiss = true" />