Supra_App/src/routes/(authed)/+layout.svelte

<!-- navbar select menus -->
<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';
	import AppAccountSelect from '$lib/components/app-account-select.svelte';
	import AppSidebar from '$lib/components/app-sidebar.svelte';
	import * as Sidebar from '$lib/components/ui/sidebar/index';
	import '../layout.css';
	import ErrorLayout from '$lib/components/error-layout.svelte';
	import { sidebarStore } from '$lib/core/stores/sidebar';
	import { onMount } from 'svelte';
	import { auth } from '$lib/core/stores/auth';
	import { get } from 'svelte/store';
	import { connectToWebsocket } from '$lib/core/stores/websocketStore';

	let { children } = $props();

	onMount(() => {
		let currentUser = get(auth);
		console.log(`on mount layout current user: ${JSON.stringify(currentUser)}`);
		if (currentUser) {
			connectToWebsocket();
		}
	});
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex" rel="stylesheet" />
	<title>Taobin Management Tools</title>
</svelte:head>

<Sidebar.Provider
	onOpenChange={(open) => {
		sidebarStore.set(open);
	}}
>
	<AppSidebar />
	<main class="h-screen w-screen overflow-hidden">
		<Sidebar.Trigger />
		{@render children()}
	</main>
</Sidebar.Provider>