55 lines
1.4 KiB
Svelte
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>
|