From 831c560a96c6a8f4c783518de4d97f7c54dfa12f Mon Sep 17 00:00:00 2001
From: Khaled Oghli <65956317+khaledOghli@users.noreply.github.com>
Date: Mon, 3 Jun 2024 17:30:45 +0400
Subject: [PATCH] docs(slideover): add close button in some examples for mobile
 (#1827)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../content/examples/SlideoverExampleBasic.vue   | 10 ++++++++++
 .../content/examples/SlideoverExampleCard.vue    | 16 +++++++++++++++-
 .../examples/SlideoverExampleDisableOverlay.vue  | 11 +++++++++++
 .../SlideoverExampleDisableTransition.vue        | 11 +++++++++++
 4 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/docs/components/content/examples/SlideoverExampleBasic.vue b/docs/components/content/examples/SlideoverExampleBasic.vue
index f2e7d93e..ca0d4a3c 100644
--- a/docs/components/content/examples/SlideoverExampleBasic.vue
+++ b/docs/components/content/examples/SlideoverExampleBasic.vue
@@ -8,6 +8,16 @@ const isOpen = ref(false)
 
     <USlideover v-model="isOpen">
       <div class="p-4 flex-1">
+        <UButton
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-x-mark-20-solid"
+          class="flex sm:hidden absolute end-5 top-5 z-10"
+          square
+          padded
+          @click="isOpen = false"
+        />
         <Placeholder class="h-full" />
       </div>
     </USlideover>
diff --git a/docs/components/content/examples/SlideoverExampleCard.vue b/docs/components/content/examples/SlideoverExampleCard.vue
index 40121b80..de428e4c 100644
--- a/docs/components/content/examples/SlideoverExampleCard.vue
+++ b/docs/components/content/examples/SlideoverExampleCard.vue
@@ -7,8 +7,22 @@ const isOpen = ref(false)
     <UButton label="Open" @click="isOpen = true" />
 
     <USlideover v-model="isOpen">
-      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <UCard
+        class="flex flex-col flex-1"
+        :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
+      >
         <template #header>
+          <UButton
+            color="gray"
+            variant="ghost"
+            size="sm"
+            icon="i-heroicons-x-mark-20-solid"
+            class="flex sm:hidden absolute end-5 top-5 z-10"
+            square
+            padded
+            @click="isOpen = false"
+          />
+
           <Placeholder class="h-8" />
         </template>
 
diff --git a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
index be1575b7..b039ad0b 100644
--- a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
+++ b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
@@ -8,6 +8,17 @@ const isOpen = ref(false)
 
     <USlideover v-model="isOpen" :overlay="false">
       <div class="p-4 flex-1">
+        <UButton
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-x-mark-20-solid"
+          class="flex sm:hidden absolute end-5 top-5 z-10"
+          square
+          padded
+          @click="isOpen = false"
+        />
+
         <Placeholder class="h-full" />
       </div>
     </USlideover>
diff --git a/docs/components/content/examples/SlideoverExampleDisableTransition.vue b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
index b48c9865..fd1661f2 100644
--- a/docs/components/content/examples/SlideoverExampleDisableTransition.vue
+++ b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
@@ -8,6 +8,17 @@ const isOpen = ref(false)
 
     <USlideover v-model="isOpen" :transition="false">
       <div class="p-4 flex-1">
+        <UButton
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-x-mark-20-solid"
+          class="flex sm:hidden absolute end-5 top-5 z-10"
+          square
+          padded
+          @click="isOpen = false"
+        />
+
         <Placeholder class="h-full" />
       </div>
     </USlideover>