init

2024-03-13 00:30:45 +01:00
commit d761a10bf7
102 changed files with 4761 additions and 0 deletions
@@ -0,0 +1,111 @@
+<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>