<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>