111 lines
No EOL
3.8 KiB
Svelte
111 lines
No EOL
3.8 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/environment';
|
|
import { page } from '$app/stores';
|
|
import Navbar from '$lib/components/dashboard/Navbar.svelte';
|
|
import Showcase from '$lib/components/dashboard/auth/Showcase.svelte';
|
|
import ProfileContainerPlaceholder from '$lib/components/screens/ProfileContainerPlaceholder.svelte';
|
|
import { type } from '$lib/models/modal.js';
|
|
import { modalStore } from '$lib/stores/modal.js';
|
|
import Loading from '$lib/components/screens/Loading.svelte';
|
|
|
|
export let data;
|
|
|
|
$: auth =
|
|
$page.url.pathname.startsWith('/dashboard/login') ||
|
|
$page.url.pathname.startsWith('/dashboard/register') ||
|
|
$page.url.pathname.startsWith('/dashboard/logout');
|
|
|
|
$: modal = browser && $modalStore?.type != null ? type[$modalStore.type] : null;
|
|
$: isModal = $modalStore?.visible && modal?.navbarMount === true;
|
|
|
|
$: mouseDown = false;
|
|
|
|
const dismissModal = () => {
|
|
mouseDown = false;
|
|
if ($modalStore?.visible) $modalStore.hideModal();
|
|
};
|
|
|
|
</script>
|
|
|
|
{#if browser}
|
|
<div class="flex h-full">
|
|
{#if !auth}
|
|
<div class="w-full h-full">
|
|
<div class="h-full" on:mouseup={modal?.navbarMount ? undefined : dismissModal}>
|
|
<slot />
|
|
</div>
|
|
<div
|
|
class="navbar-container top-0 bottom-0 left-0 right-0 fixed z-40 flex flex-col justify-end items-center gap-4 p-6 overflow-hidden pointer-events-none select-none transition-all"
|
|
class:!p-0={$modalStore?.visible && modal?.navbarMount}
|
|
class:sm:!p-6={$modalStore?.visible && modal?.navbarMount}
|
|
class:!pointer-events-auto={$modalStore?.visible && modal?.navbarMount}
|
|
on:mousedown|self={() => (mouseDown = true)}
|
|
on:mouseup|self={() => (mouseDown ? dismissModal() : undefined)}
|
|
class:!gap-0={isModal}>
|
|
<Navbar sessionData={data.session?.data} />
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="flex w-full h-full justify-center items-center">
|
|
<div
|
|
class="w-full h-full flex gap-6 xl:gap-[60px] 2xl:gap-[120px] pl-6 xl:pl-[60px] 2xl:pl-[120px] pr-6 items-center justify-center">
|
|
<div
|
|
class="flex-shrink-0 w-[400px] lg:max-h-screen px-1 py-6 overflow-x-hidden overflow-y-auto flex flex-col items-center gap-4 md:gap-6">
|
|
<a class="box-content p-4" href="/">
|
|
<div class="w-16 h-16 bg-white logo" title="YourSitee logo" />
|
|
</a>
|
|
<slot />
|
|
</div>
|
|
<div class="showcase w-full h-full max-w-[1920px] max-h-[1440px] hidden lg:block">
|
|
<Showcase />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
{#if !auth}
|
|
<ProfileContainerPlaceholder uniqueId={data.session?.data.uniqueId} />
|
|
{:else}
|
|
<Loading />
|
|
{/if}
|
|
<noscript
|
|
><div class="absolute top-0 left-0 right-0 bottom-0 bg-dark-app-bg z-50 flex justify-center items-center">
|
|
<div class="p-8">
|
|
<p class="text-[32px] font-bold">⚠️ You don't have JavaScript enabled</p>
|
|
<p class="text-secondary">
|
|
Unfortunately, <b>JavaScript is required</b> for the dashboard. Enable it and try again.
|
|
</p>
|
|
</div>
|
|
</div></noscript>
|
|
{/if}
|
|
|
|
<style lang="postcss">
|
|
.navbar-container {
|
|
animation: pop-up 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1;
|
|
transition: gap 0.2s linear;
|
|
}
|
|
|
|
@keyframes pop-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(3.25%);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
transform: translateY(3.25%);
|
|
}
|
|
|
|
100% {
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
mask-image: url(/assets/brand/icon.svg);
|
|
}
|
|
|
|
.showcase {
|
|
height: calc(100vh - 3rem);
|
|
}
|
|
</style>
|
|
|