docs(slideover): add close button in some examples for mobile (#1827)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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>

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>
 

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>

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>