teoldalad/lib/components/dashboard/modal/Container.svelte
2024-03-13 00:30:45 +01:00

55 lines
1.4 KiB
Svelte

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