path: root/frontend/src/lib/containers/Grid.svelte

<script lang="ts">
	import { fadeDefault } from '$lib/Transitions';
	import type { Snippet } from 'svelte';
	import { fade } from 'svelte/transition';

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

<div
	class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto"
	in:fade|global={fadeDefault}
>
	{@render children?.()}
</div>

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

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