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";
	import { goto } from "@sapper/app";

	export async function preload(this: PreloadContext, { path }: PageData, session: AppSession) {
		const authResult = await this.fetch("/login/check");
		const result = (await authResult.json()) as AuthInfo;
		console.log(`Auth: ${result.loggedIn}`);
		if (path.startsWith("/login/")) {
			if (result.loggedIn) {
				return this.redirect(302, "/");
			} else {
				return result;
			}
		}
		if (path != "/" && !result.loggedIn) {
			return this.redirect(302, "/");
		}
		if (path != "/rules/create" && result.moderator) {
			return this.redirect(302, "/rules/create");
		}
		return result;
	}
</script>

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

	export let loggedIn!: boolean;
	let path: string;
	$: path = $page.path.slice(1);
</script>

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

* {
	@apply font-sans;
}

nav {
	@apply fixed w-screen h-12 shadow-lg flex flex-row justify-end items-center px-4;
	background-color: #0a0d13;

	a {
		@apply text-white px-5 py-3;

		&:hover {
			@apply bg-gray-800 cursor-pointer;
		}
	}
}
</style>

<svelte:head>
	<title>
		{path ? path.charAt(0).toUpperCase() + path.slice(1) : "Index"}
	</title>
</svelte:head>

{#if loggedIn}
<nav>
	<a href="/logout">Log out</a>
</nav>
{/if}


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