drawer close

app/javascript/template_builder/mobile_drawer.vue

@@ -14,6 +14,13 @@
       @dragenter="$emit('close')"
       @touchmove.prevent
     />
+    <div
+      class="absolute bottom-3 flex items-center justify-center w-10 h-10 rounded-full bg-base-100 shadow-lg pointer-events-none transition-opacity duration-300"
+      :class="open ? 'opacity-100' : 'opacity-0'"
+      :style="side === 'left' ? 'left: calc(min(82%, 340px) + 0.75rem)' : 'right: calc(min(82%, 340px) + 0.75rem)'"
+    >
+      <IconX class="w-5 h-5" />
+    </div>
     <div
       ref="panel"
       class="absolute top-0 bottom-0 bg-base-100 shadow-xl overflow-y-auto overflow-x-hidden overscroll-contain px-4 transition-transform duration-300 ease-out"
@@ -27,8 +34,13 @@
 </template>
 
 <script>
+import { IconX } from '@tabler/icons-vue'
+
 export default {
   name: 'MobileDrawer',
+  components: {
+    IconX
+  },
   props: {
     side: {
       type: String,