From 44e6ba039d47078667928723d3c7a4e653b72652 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 2 Apr 2025 10:54:53 +0200
Subject: [PATCH] docs(drawer): add responsive example

Resolves #3772
---
 .../drawer/DrawerResponsiveExample.vue        | 43 +++++++++++++++++++
 docs/content/3.components/drawer.md           | 11 +++++
 2 files changed, 54 insertions(+)
 create mode 100644 docs/app/components/content/examples/drawer/DrawerResponsiveExample.vue

diff --git a/docs/app/components/content/examples/drawer/DrawerResponsiveExample.vue b/docs/app/components/content/examples/drawer/DrawerResponsiveExample.vue
new file mode 100644
index 00000000..a48d763f
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerResponsiveExample.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+
+const [DefineFormTemplate, ReuseFormTemplate] = createReusableTemplate()
+const isDesktop = useMediaQuery('(min-width: 768px)')
+
+const open = ref(false)
+
+const state = reactive({
+  email: undefined
+})
+
+const title = 'Edit profile'
+const description = 'Make changes to your profile here. Click save when you\'re done.'
+</script>
+
+<template>
+  <DefineFormTemplate>
+    <UForm :state="state" class="space-y-4">
+      <UFormField label="Email" name="email" required>
+        <UInput v-model="state.email" placeholder="shadcn@example.com" required />
+      </UFormField>
+
+      <UButton label="Save changes" type="submit" />
+    </UForm>
+  </DefineFormTemplate>
+
+  <UModal v-if="isDesktop" v-model:open="open" :title="title" :description="description">
+    <UButton label="Edit profile" color="neutral" variant="outline" />
+
+    <template #body>
+      <ReuseFormTemplate />
+    </template>
+  </UModal>
+
+  <UDrawer v-else v-model:open="open" :title="title" :description="description">
+    <UButton label="Edit profile" color="neutral" variant="outline" />
+
+    <template #body>
+      <ReuseFormTemplate />
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index dfd3d76c..42332314 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -306,6 +306,17 @@ name: 'drawer-dismissible-example'
 In this example, the `header` slot is used to add a close button which is not done by default.
 ::
 
+### Responsive drawer
+
+You can render a [Modal](/components/modal) component on desktop and a Drawer on mobile for example.
+
+::component-example
+---
+prettier: true
+name: 'drawer-responsive-example'
+---
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Drawer's body.