Maybe get dialogs behaving properly

src/lib/components/Drawer.svelte

@@ -1,37 +1,17 @@
 <script lang="ts">
-  import {randomId} from "@welshman/lib"
+  import {fade, slide} from "@lib/transition"
 
-  const id = randomId()
-
-  let input: any
-  let label: any
-
-  export const open = () => {
-    if (!input.checked) {
-      label.click()
-    }
-  }
-
-  export const close = () => {
-    if (input.checked) {
-      label.click()
-    }
-  }
-
-  export const toggle = () => {
-    label.click()
-  }
+  export let onClose
 </script>
 
-<div class="drawer drawer-end">
-  <input {id} type="checkbox" class="drawer-toggle" bind:this={input} on:change />
-  <div class="drawer-content">
-    <label for={id} bind:this={label} />
-  </div>
-  <div class="drawer-side z-modal">
-    <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu h-full w-80 overflow-auto bg-base-200 p-0 text-base-content lg:w-96">
-      <slot />
-    </div>
+<div class="fixed inset-0 z-modal">
+  <button
+    class="absolute inset-0 cursor-pointer bg-black opacity-50"
+    transition:fade
+    on:click={onClose} />
+  <div
+    class="menu absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    transition:slide={{axis: "x", duration: 300}}>
+    <slot />
   </div>
 </div>