init

lib/components/dashboard/modal/Container.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { modalStore } from '$lib/stores/modal';
+  import { page } from '$app/stores';
+  import { afterNavigate } from '$app/navigation';
+
+  export let invisible: boolean = false;
+  export let align: BioSiteAlign = 'CENTER';
+  export let verticalEnd: boolean = false;
+  export let path: string | undefined = undefined;
+  export let navbarMount: boolean | undefined = undefined;
+
+  const validatePath = () => {
+    if (!path) return;
+    if ($page.url.pathname != path) {
+      $modalStore?.hideModal();
+    }
+  };
+
+  afterNavigate(validatePath);
+</script>
+
+<div
+  class="widget-container flex justify-center items-center"
+  class:not-visible={invisible}
+  class:navbar={navbarMount}
+  class:!justify-start={align === 'LEFT'}
+  class:!justify-end={align === 'RIGHT'}
+  class:!items-end={verticalEnd}
+  on:click|self={() => {
+    $modalStore?.hideModal();
+  }}
+  aria-hidden={navbarMount !== true ? 'true' : undefined}>
+  <div class:contents={align !== 'CENTER' && !navbarMount}>
+    <slot />
+  </div>
+</div>
+
+<style lang="postcss">
+  .widget-container.not-visible {
+    @apply pointer-events-none;
+  }
+
+  .widget-container:not(.not-visible):not(.navbar) {
+    @apply bg-black bg-opacity-[.65] backdrop-blur-md;
+  }
+
+  .widget-container.navbar,
+  .widget-container.navbar > div {
+    @apply w-full h-full;
+  }
+
+  .widget-container:not(.navbar) {
+    @apply fixed top-0 left-0 bottom-0 right-0 z-50 p-5;
+  }
+</style>