fixed onboarding feature

src/components/Onboarding.svelte

@@ -1,24 +1,11 @@
 <script>
-	import { onMount } from 'svelte';
 	import { Stepper, Step } from '@skeletonlabs/skeleton';
 
-	var onboarding, onboardingStore;
+	import { localStorageStore } from '@skeletonlabs/skeleton';
-
+	const onboardingShow = localStorageStore('onboarding', true);
-	onMount(() => {
-		onboardingStore = localStorage.getItem('onboarding');
-		if (onboardingStore === null) {
-			onboarding = true;
-			localStorage.setItem('onboarding', onboarding);
-		} else if (onboardingStore === 'true') {
-			onboarding = true;
-		} else if (onboardingStore === 'false') {
-			onboarding = false;
-		}
-	});
 
 	function onCompleteHandler(e) {
-		onboarding = false;
+		$onboardingShow = false;
-		localStorage.setItem('onboarding', onboarding);
 	}
 
 	var stepsObj = [
@@ -49,7 +36,6 @@
 	];
 </script>
 
-{#if onboarding == true}
 <div id="stepper-wrapper" class="fixed top-0 left-0 w-full h-full p-12 bg-slate-50 z-10">
 	<Stepper on:complete={onCompleteHandler} class="h-full flex flex-col" regionContent="grow" buttonCompleteLabel="Start" buttonNext='btn-lg variant-filled-primary' buttonBack='btn-lg variant-filled-surface' buttonComplete='btn-lg variant-filled-primary'>
 		{#each stepsObj as item}
@@ -63,4 +49,3 @@
 		{/each}
 	</Stepper>
 </div>
-{/if}

src/routes/+layout.svelte

@@ -22,6 +22,10 @@
 
 	var mapVisible = false;
 	$: $page.url.pathname == '/' || $page.url.pathname == '/control' ? mapVisible = true : mapVisible = false;
+
+
+	import { localStorageStore } from '@skeletonlabs/skeleton';
+	const onboardingShow = localStorageStore('onboarding', true);
 </script>
 
 <main class="min-h-screen p-8 pb-32">
@@ -31,7 +35,9 @@
 		<Map />
 	</div>
 	<Navigation />
+	{#if $onboardingShow}
 	<Onboarding />
+	{/if}
 </main>
 <Drawer position="right">
 	{#if $drawerStore.id === 'edit-device'}

src/routes/settings/+page.svelte

@@ -1,9 +1,8 @@
 <script>
 	import { LightSwitch } from '@skeletonlabs/skeleton';
 
-	function resetOnboarding() {
+	import { localStorageStore } from '@skeletonlabs/skeleton';
-		localStorage.setItem('onboarding', true);
+	const onboardingShow = localStorageStore('onboarding', true);
-	}
 
 	import { getModalStore } from '@skeletonlabs/skeleton';
 	const modalStore = getModalStore();
@@ -27,7 +26,7 @@
 		<LightSwitch bgDark="bg-surface-700" />
 	</div>
 
-	<button type="button" class="btn variant-filled-surface w-full" on:click={resetOnboarding}>Restart Onboarding</button>
+	<button type="button" class="btn variant-filled-surface w-full" on:click={() => {$onboardingShow = true}}>Restart Onboarding</button>
 	
 	<button type="button" class="btn variant-ghost-error w-full" on:click={resetModal}>Reset</button>
 </div>