<script lang="ts">
	import AppSidebar from './(components)/app-sidebar.svelte'
	import * as Sidebar from '$lib/components/ui/sidebar/index.js'
	import { Toaster } from '$lib/components/ui/sonner/index.js'

	let { data, children } = $props()
</script>

<Sidebar.Provider>
	<AppSidebar collapsible="offcanvas" />
	<Sidebar.Inset>
		<header class="flex h-16 shrink-0 items-center gap-2 px-4">
			<Sidebar.Trigger class="-ml-1" />
		</header>

		{@render children()}
	</Sidebar.Inset>
</Sidebar.Provider>
<Toaster richColors />
