init

lib/components/dashboard/modal/Panel.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { modalStore } from '$lib/stores/modal';
+
+  export let transitionX: number = 0;
+  export let transitionY: number = 25;
+  export let navbarMount: boolean | undefined = undefined;
+
+  const dismissModal = () => $modalStore?.hideModal();
+</script>
+
+<div
+  class="z-[51] flex flex-col gap-2 pointer-events-auto max-h-screen"
+  class:h-full={navbarMount === true}
+  aria-modal="true"
+  style="--x: {transitionX}px; --y: {transitionY}px;"
+  on:click|self={dismissModal}
+  on:keyup|self={dismissModal}>
+  <slot />
+</div>
+
+<style lang="postcss">
+  div {
+    animation-name: fly;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 0.2s;
+  }
+
+  @keyframes fly {
+    from {
+      opacity: 0;
+      transform: translateX(var(--x)) translateY(var(--y));
+    }
+
+    to {
+    }
+  }
+</style>