<script lang="ts">
	import Navbar from "$lib/components/Navbar.svelte";
	import { toastStore } from "$lib/toast";
	import { Toast, ToastHeader, ToastBody } from "@sveltestrap/sveltestrap";
	import "../app.scss";
	import type { LayoutData } from "./$types";

	export let data: LayoutData;
</script>

<Navbar user={data.user} />

<div class="container">
	<slot />
	<div class="position-absolute top-0 start-50 translate-middle-x">
		{#each $toastStore as toast}
			<Toast>
				{#if toast.header}<ToastHeader>{toast.header}</ToastHeader>{/if}
				<ToastBody>{toast.body}</ToastBody>
			</Toast>
		{/each}
	</div>
</div>
