✨ Fixed #12

frontend/src/lib/navbar.svelte

@@ -1,6 +1,7 @@
 <script>
 	import '@fontsource/marck-script/index.css';
 	import { getLocalization } from '$lib/i18n';
+	import { signedIn } from '$lib/stores';
 
 	const { t } = getLocalization();
 
@@ -17,15 +18,11 @@
 <nav
 	class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0"
 >
-	<!-- Our logo and button -->
 	<section class="w-full lg:w-max flex justify-between">
-		<!-- Logo -->
 		<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
 			>ClassQuiz</a
 		>
 
-		<!-- Our open/close buttons -->
-		<!-- Open menu -->
 		<button
 			class="lg:hidden"
 			id="open-menu"
@@ -76,12 +73,43 @@
 		</button>
 	</section>
 
-	<!-- Our list of items -->
 	<ul
 		id="menu-items"
 		class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
 		class:hidden={!menuItems}
 	>
+		{#if $signedIn}
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/play">{$t('words.play')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/overview">{$t('words.overview')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="https://github.com/mawoka-myblock/classquiz">GitHub</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/api/v1/users/logout">{$t('words.logout')}</a
+				>
+			</li>
+			<li class="py-2">
+				<a
+					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+					href="/docs">{$t('words.docs')}</a
+				>
+			</li>
+		{:else}
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
@@ -112,5 +140,6 @@
 					href="/docs">{$t('words.docs')}</a
 				>
 			</li>
+		{/if}
 	</ul>
 </nav>

frontend/src/lib/stores.ts

@@ -1,3 +1,4 @@
 import { writable } from 'svelte/store';
 
 export const navbarVisible = writable(true);
+export const signedIn = writable(false);

frontend/src/routes/account/__layout.svelte

@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
 <script lang="ts">
 	import { navbarVisible } from '$lib/stores';
 

frontend/src/routes/create.svelte

@@ -1,4 +1,6 @@
 <script context="module" lang="ts">
+	import { signedIn } from '$lib/stores';
+
 	export async function load({ session, url }) {
 		if (!session.authenticated) {
 			return {
@@ -6,6 +8,9 @@
 				redirect: '/account/login'
 			};
 		}
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
 		const token = url.searchParams.get('token');
 		const pin = url.searchParams.get('pin');
 		let auto_connect = url.searchParams.get('connect') !== null;

frontend/src/routes/docs/__layout.svelte

@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
 <script lang="ts">
 	import Footer from '$lib/footer.svelte';
 	import { navbarVisible } from '$lib/stores';

frontend/src/routes/edit.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
 	export async function load({ url, session }) {
 		if (!session.authenticated) {
 			return {
@@ -6,6 +7,10 @@
 				redirect: '/account/login'
 			};
 		}
+
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
 		const quiz_id = url.searchParams.get('quiz_id');
 		if (quiz_id === null) {
 			return {

frontend/src/routes/import.svelte

@@ -1,10 +1,15 @@
 <script context="module" lang="ts">
+	import { signedIn } from '$lib/stores';
 	export async function load({ session }) {
 		if (!session.authenticated) {
 			return {
 				status: 302,
 				redirect: '/account/login'
 			};
+		} else {
+			if (session.authenticated) {
+				signedIn.set(true);
+			}
 		}
 		return {
 			props: {

frontend/src/routes/index.svelte

@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
 <script lang="ts">
 	import { navbarVisible } from '$lib/stores';
 	import { getLocalization } from '$lib/i18n';

frontend/src/routes/overview.svelte

@@ -19,8 +19,9 @@
 	import { DateTime } from 'luxon';
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
-	import { navbarVisible } from '$lib/stores';
+	import { navbarVisible, signedIn } from '$lib/stores';
 
+	signedIn.set(true);
 	navbarVisible.set(true);
 	const { t } = getLocalization();
 

frontend/src/routes/play.svelte

@@ -1,5 +1,9 @@
 <script context="module" lang="ts">
-	export async function load({ url }) {
+	import { signedIn } from '$lib/stores';
+	export async function load({ url, session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
 		const token = url.searchParams.get('pin');
 		return {
 			props: {