<script lang="ts">
	import type { LayoutProps } from './$types';

	import AppSidebar from '$lib/components/app-sidebar.svelte';
	import Breadcrumb from '$lib/components/breadcrumb.svelte';
	import * as Sidebar from '$lib/components/ui/sidebar';
	import { Toaster } from '$lib/components/ui/sonner';

	let { children }: LayoutProps = $props();
</script>

<Sidebar.Provider>
	<AppSidebar />
	<Sidebar.Inset>
		<header
			class="sticky right-0 top-0 z-10 flex h-16 items-center justify-between border-b bg-sidebar p-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-16"
		>
			<div class="flex items-center gap-4">
				<Sidebar.Trigger />
				<Breadcrumb />
			</div>
		</header>
		<main class="flex flex-1 flex-col gap-4 p-4">
			{@render children?.()}
		</main>
	</Sidebar.Inset>
</Sidebar.Provider>

<Toaster position="top-right" theme="dark" />
