fix: move layout menu to root navigation

tutors-sdk · Jul 31, 2023 · ae8bde7 · ae8bde7
1 parent b49add6
commit ae8bde7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 33 deletions.
diff --git a/apps/web/src/routes/(course-reader)/+layout.svelte b/apps/web/src/routes/(course-reader)/+layout.svelte
@@ -1,18 +1,12 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
-	import { AppShell, Toast, storePopup, setInitialClassState } from '@skeletonlabs/skeleton';
-	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
+	import { AppShell, Toast, setInitialClassState } from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
 	import { afterNavigate } from '$app/navigation';
 	import NavBar from '$lib/ui/navigators/NavBar.svelte';
 	import PageHeader from '$lib/ui/navigators/PageHeader.svelte';
 	import { Footer } from '$lib/ui/legacy';
-	import tutors from '$lib/ui/legacy/themes/tutors.css?inline';
-	import dyslexia from '$lib/ui/legacy/themes/dyslexia.css?inline';
-	import halloween from '$lib/ui/legacy/themes/halloween.css?inline';
-	import valentines from '$lib/ui/legacy/themes/valentines.css?inline';
-	import { authenticating, transitionKey, storeTheme, currentCourse, currentLo } from '$lib/stores';
+	import { authenticating, transitionKey, currentCourse, currentLo } from '$lib/stores';
 	import PageTransition from '$lib/ui/PageTransition.svelte';
 	import { getKeys } from '$lib/environment';
 	import TutorsTerms from '$lib/ui/support/TutorsTerms.svelte';
@@ -21,15 +15,10 @@
 	import Sidebars from '$lib/ui/navigators/sidebars/Sidebars.svelte';
 
 	let mounted = false;
-	const themes: any = { tutors, dyslexia, halloween, valentines };
 	let currentRoute = '';
 
-	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
-
 	onMount(async () => {
 		mounted = true;
-		storeTheme.subscribe(setBodyThemeAttribute);
-		setColorScheme();
 		setInitialClassState();
 		initServices();
 		const func = () => {
@@ -68,26 +57,9 @@
 			}
 		}
 	});
-
-	function setColorScheme() {
-		if (
-			localStorage.getItem('storeLightSwitch') === 'true' ||
-			(!('storeLightSwitch' in localStorage) &&
-				window.matchMedia('(prefers-color-scheme: dark)').matches)
-		) {
-			document.documentElement.classList.add('dark');
-		} else {
-			document.documentElement.classList.remove('dark');
-		}
-	}
-
-	function setBodyThemeAttribute(): void {
-		document.body.setAttribute('data-theme', $storeTheme);
-	}
 </script>
 
 <svelte:head>
-	{@html `\<style\>${themes[$storeTheme]}}\</style\>`}
 	{#if currentLo}
 		<title>{$currentLo?.title}</title>
 	{:else}

diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
@@ -5,14 +5,30 @@
 	import { invalidate } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	import { storeTheme } from '$lib/stores';
 
-	import { AppBar, Avatar, LightSwitch } from '@skeletonlabs/skeleton';
+	import { AppBar, Avatar, storePopup } from '@skeletonlabs/skeleton';
+	import LayoutMenu from '$lib/ui/navigators/LayoutMenu.svelte';
+	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
+
+	import tutors from '$lib/ui/legacy/themes/tutors.css?inline';
+	import dyslexia from '$lib/ui/legacy/themes/dyslexia.css?inline';
+	import halloween from '$lib/ui/legacy/themes/halloween.css?inline';
+	import valentines from '$lib/ui/legacy/themes/valentines.css?inline';
+	import NavUser from '$lib/ui/navigators/NavUser.svelte';
+
+	const themes: any = { tutors, dyslexia, halloween, valentines };
+	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 
 	export let data: any;
 
 	let { supabase, session } = data;
 	$: ({ supabase, session } = data);
 
+	function setBodyThemeAttribute(): void {
+		document.body.setAttribute('data-theme', $storeTheme);
+	}
+
 	onMount(() => {
 		const {
 			data: { subscription }
@@ -21,11 +37,15 @@
 				invalidate('supabase:auth');
 			}
 		});
-
+		storeTheme.subscribe(setBodyThemeAttribute);
 		return () => subscription.unsubscribe();
 	});
 </script>
 
+<svelte:head>
+	{@html `\<style\>${themes[$storeTheme]}}\</style\>`}
+</svelte:head>
+
 <AppBar background="bg-surface-100-800-token" shadow="none" class="h-20 justify-center">
 	<svelte:fragment slot="lead">
 		{#if $page.url.pathname === '/' || $page.url.pathname === '/auth' || $page.url.pathname === '/dashboard'}
@@ -66,7 +86,7 @@
 		{/if}
 		<span class="divider-vertical h-10 hidden lg:block" />
 
-		<LightSwitch />
+		<LayoutMenu />
 	</svelte:fragment>
 </AppBar>
 <slot />