<script lang="ts">
	// The ordering of these imports is critical to your app working properly
	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
	import '@skeletonlabs/skeleton/styles/all.css';
	// Most of your app wide CSS should be put in this file
	import '../app.postcss';
	import {
		AppBar,
		AppShell,
		Avatar,
		Drawer,
		LightSwitch,
		Modal,
		drawerStore
	} from '@skeletonlabs/skeleton';
	import Navigation from '$lib/components/Navigation.svelte';

	function drawerOpen(): void {
		drawerStore.open();
	}

	export let data;
</script>

<Drawer>
	<Navigation {data} />
</Drawer>

<Modal />

<AppShell slotSidebarLeft="w-0 md:w-52 bg-surface-500/20">
	<svelte:fragment slot="header">
		<AppBar>
			<svelte:fragment slot="lead">
				<button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
					<span>
						<svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
							<rect width="100" height="20" />
							<rect y="30" width="100" height="20" />
							<rect y="60" width="100" height="20" />
						</svg>
					</span>
				</button>

				<strong class="text-xl uppercase">Sveltekit web app blog</strong>
			</svelte:fragment>

			<svelte:fragment slot="trail">
				<LightSwitch />
				{#if data.user}
					<Avatar initials={data.user.username.charAt(0)} width="w-10" />
				{:else}
					<a href="/login" class="btn variant-filled">Sign in</a>
				{/if}
			</svelte:fragment>
		</AppBar>
	</svelte:fragment>
	<!-- Side menu -->
	<svelte:fragment slot="sidebarLeft">
		<Navigation {data} />
	</svelte:fragment>
	<svelte:fragment slot="sidebarRight" />
	<svelte:fragment slot="pageHeader" />
	<!-- Router Slot -->
	<div class="container p-10 mx-auto">
		<slot />
	</div>
	<!-- ---- / ---- -->
	<svelte:fragment slot="pageFooter" />
	<svelte:fragment slot="footer" />
</AppShell>
