Default Layout Structure

<script>
	import { browser } from "$app/environment";
	import Footer from "$lib/Components/Layouts/Footer.svelte";
	import Sidebar from "$lib/Components/Layouts/Sidebar.svelte";
	import Topbar from "$lib/Components/Layouts/Topbar/Topbar.svelte";
	import { onMount } from "svelte";
	import {page} from "$app/stores";
	//states
	let isSidebarOpen = false;

	function toggleSidebar() {
		document.body.classList.toggle("toggle-sidebar");
		isSidebarOpen = !isSidebarOpen;
	}
	function toggleDirection() {
		let direction = document.dir;
		direction = direction == "ltr" ? "rtl" : "ltr";
		document.dir = direction;
		localStorage.setItem("direction", direction);
	}

	onMount(() => {
		if (!browser) return;
		
		let direction = localStorage.getItem("direction") || document.dir;
		if (!localStorage.getItem("direction")) {
			localStorage.setItem("direction", direction);
		}
		document.dir = direction;
	});
</script>

<svelte:head>
	<!-- Site Tiltle -->
	<title>Sliced - Tailwind CSS Admin & Dashboard Template</title>

	<!-- Favicon Icon -->
	<link rel="shortcut icon" href="/assets/images/favicon.ico" />
</svelte:head>

<!-- Start Layout -->
<div class="bg-[#f9fbfd] dark:bg-dark text-black">
	<!-- Start detached bg -->
	<div
		style="background-image: url('/assets/images/bg-main.png');"
		class="bg-black min-h-[220px] sm:min-h-[250px] bg-bottom fixed hidden w-full -z-50 detached-img"
	></div>
	<!-- Start Menu Sidebar Overlay -->
	<div
		class={`fixed inset-0 bg-black60 dark:bg-dark90 z-999lg:hidden isSidebarOpen ? "hidden" : ""}`}
		on:clickself={toggleSidebar}
		on:keydown={toggleSidebar}
		role="button"
		aria-label="Close sidebar"
		aria-pressed="false"
		tabindex="0"
		id="sidebar-overlay"
	></div>
	<!-- End Menu Sidebar Overlay -->

	<!-- Start Main Content -->
	<div class="flex mx-auto main-container">
		<!-- Start Sidebar -->
		<Sidebar {isSidebarOpen} />

		<!-- Start Content Area -->
		<div class="flex-1 main-content">
			<!-- Start Topbar -->
			<Topbar on:OPEN_SIDEBAR={toggleSidebar} />

			<!-- Start Content -->
			<div
				class="h-[calc(100vh-60px)] relative overflow-y-auto overflow-x-hidden p-4 space-y-4 detached-content"
			>
				<slot><!-- page fallback --></slot>

				<!-- Start Footer -->
				<Footer />
			</div>
			<!-- End Content -->
		</div>
		<!-- End Content Area -->
	</div>
</div>
<!-- End Layout -->

<button
	type="button"
	class="fixed z-50 px-4 text-white border-gray-200 shadow-lg h-11 ltr:right-0 rtl:left-0 bg-purple ltr:rounded-l-md rtl:rounded-r-md top-1/3"
	on:click={toggleDirection}
>
	<span class="rtl:hidden">RTL</span>
	<span class="ltr:hidden">LTR</span>
</button>