<script>
	import { fadeDefault } from '$lib/Transitions';

	import { fade } from 'svelte/transition';
</script>

<div
	class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto"
	in:fade|global={fadeDefault}
>
	<slot />
</div>

<style>
	div {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;

		grid-template-areas:
			'header header'
			'sidebar main';
	}
</style>