toeasy-front/src/routes/+layout.svelte

<script>
	import '../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import Sidebar from '$lib/layout/SideBar.svelte';
	import DashboardGuard from '$lib/components/containers/DashboardGuard.svelte';
	import { browser } from '$app/environment';
	import { page } from '$app/stores';
  
	let { children } = $props();
  
	const isRoot = $derived($page.url.pathname === '/');
	
	const isNotFound = $derived(!$page.route || !$page.route.id); 
	
	const hideSidebar = $derived(isRoot || isNotFound);
  </script>
  
  <svelte:head>
	<link rel="icon" href={favicon} />
  </svelte:head>
  
  <div class="flex min-h-screen">
	{#if browser}
	  {#if hideSidebar}
	  <main class="flex-1 bg-gray-50 dark:bg-gray-900">
		{@render children?.()}
		</main>
	  {:else}
		<Sidebar />
		<main class="flex-1 ml-64 bg-gray-50 dark:bg-gray-900">
		  <DashboardGuard>
			{@render children?.()}
		  </DashboardGuard>
		</main>
	  {/if}
	{/if}
  </div>