noctbot/web/src/routes/_layout.svelte

<script lang="typescript" context="module">
  import type { AppSession, PageData, PreloadContext } from "src/utils/session";
  import type { AuthInfo } from "src/routes/login/check";

  // TODO: Clean up this awful mess
  export async function preload(
    this: PreloadContext,
    { path }: PageData,
    session: AppSession
  ) {
    const authResult = await this.fetch("/login/check", { credentials: "include" });
    const result = (await authResult.json()) as AuthInfo;
    if (path.startsWith("/login/")) {
      if (result.loggedIn) {
        return this.redirect(302, "/");
      } else {
        return result;
      }
    }
    if (path != "/" && !result.loggedIn) {
      return this.redirect(302, "/");
    }
    if (result.loggedIn) {
      if (path == "/") {
        return this.redirect(302, "/rules");
      }
      if (!result.moderator && path != "/rules") {
        return this.redirect(302, "/rules");
      }
    }
    return result;
  }
</script>

<script lang="typescript">
  import { stores } from "@sapper/app";
  import Nav from "../components/Nav.svelte";
  const { page } = stores();

  export let loggedIn!: boolean;
  export let moderator!: boolean;
  let path: string;
  $: path = $page.path.slice(1);

  const ROUTES_NAV = [
    { route: "rules", moderatorOnly: false, name: "Rules" },
    { route: "rules/edit", moderatorOnly: true, name: "Edit rules" },
    { route: "logs", moderatorOnly: true, name: "Event logs" },
  ];
</script>

<style global>
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  * {
    @apply font-sans;
  }

  .viewport {
    @apply bg-gray-700 h-screen w-full pb-8 px-20 pt-16;
    margin-top: 3rem;
    height: calc(100vh - 3rem);
    overflow-y: auto;
  }

  @screen lg {
    .viewport {
      @apply w-2/4;
    }
  }
</style>


{#if loggedIn}
  <Nav routes={ROUTES_NAV} currentPath={path} isModerator={moderator} />
{/if}

<div class="flex items-center justify-center bg-gray-900 h-screen w-screen">
  <slot />
</div>