adds mobile drawer

web/src/lib/components/base/drawer.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { beforeNavigate } from "$app/navigation";
+    import { backIn, backOut } from "svelte/easing";
+    import { slide } from "svelte/transition";
+
+    export let open: boolean = false;
+
+    $: if (open && browser) {
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${window.scrollY}px`;
+    } else if (browser) {
+        const scrollY = document.body.style.top;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        window.scrollTo(0, parseInt(scrollY || "0") * -1);
+    }
+
+    beforeNavigate(() => {
+        open = false;
+    });
+</script>
+
+{#if open}
+    <div
+        class="fixed drawer-overlay h-screen w-screen backdrop-blur-md z-50 bg-gray-500/50 cursor-pointer"
+        on:click={() => (open = false)}
+        on:keydown={(e) => {
+            if (e.key == "Escape") open = false;
+        }}
+        role="button"
+        tabindex="0"
+    ></div>
+    <div
+        class="absolute flex flex-col overflow-y-auto w-72 h-screen bg-background right-0 top-0 z-50"
+        in:slide={{ axis: "x", easing: backOut }}
+        out:slide={{ axis: "x", easing: backIn }}
+    >
+        <slot />
+    </div>
+{/if}

web/src/lib/components/base/modal.svelte

@@ -2,10 +2,19 @@
     export let id: string;
     export let title: string;
     export function openModal() {
+        document.body.style.position = "fixed";
+        document.body.style.width = "100%";
+        document.body.style.top = `-${window.scrollY}px`;
+
         (document.getElementById(id) as HTMLDialogElement).showModal();
     }
 
     export function closeModal() {
+        const scrollY = document.body.style.top;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        window.scrollTo(0, parseInt(scrollY || "0") * -1);
+
         (document.getElementById(id) as HTMLDialogElement).close();
     }
 </script>
@@ -40,13 +49,14 @@
             <slot name="content" />
         </div>
         <!-- Modal footer -->
-        <div
-            class="p-4 md:p-5 border-t border-separator rounded-b"
-        >
+        <div class="p-4 md:p-5 border-t border-separator rounded-b">
             <slot name="footer" {closeModal} />
         </div>
     </div>
 </dialog>
 
 <style>
+    dialog::backdrop {
+        @apply bg-gray-500/50;
+    }
 </style>