Overview

src/routes/+layout.svelte file Structure.

<script>
	import { page } from "$app/stores";
    import { onMount } from "svelte";
	const publicRoutes = [all authroutes];

	$: isPublic = publicRoutes.includes($page.url.pathname);

	import { addMessages, init } from "svelte-i18n";
	import { browser } from "$app/env";

	import Sidebar from "../Layouts/VerticalLayouts/Sidebar.svelte";
	import Header from "../Layouts/VerticalLayouts/Header.svelte";
	import Footer from "../Layouts/VerticalLayouts/Footer.svelte";
	import Rightbar from "../Components/Common/RightSidebar.svelte";

	let open = false;

	let layoutType = "vertical";

	init({
		fallbackLocale: "en",
		initialLocale: "en",
	});
	onMount(() => {
		setTimeout(() => {
			document.getElementById("preloader").style.visibility = "hidden";
			document.getElementById("preloader").style.opacity = "0";
		}, 350);
	});

</script>

<svelte:head>
	<script src="//cdn.jsdelivr.net/npm/apexcharts"></script>
	<script src="//cdn.lordicon.com/xdjxvujz.js"></script>
	<script src="//unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
	<script	src="//cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
</svelte:head>


<div id="preloader">
    <div id="status">
        <div class="spinner-border text-primary avatar-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>

{#if isPublic}
	<slot />
{:else}
	<div id="layout-wrapper">
		<Header />
		<Sidebar {layoutType} />
		<div class="main-content" id="maincontent">
			<slot />
			<Footer />
		</div>
		<Rightbar bind:open {layoutType} />
	</div>
{/if}   
<style lang="scss" global>
	@import "../assets/scss/themes.scss";
</style>