<script lang="ts">
	import type { Snippet } from 'svelte';
	import MobileTabBar from './MobileTabBar.svelte';
	import TabletNavBar from './TabletNavBar.svelte';
	import DesktopSidebar from './DesktopSidebar.svelte';

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

<div class="flex min-h-screen bg-[var(--color-page)]">
	<DesktopSidebar {appName} {householdName} />
	<div class="flex flex-1 flex-col">
		<TabletNavBar />
		<main class="flex-1">
			{@render children?.()}
		</main>
		<MobileTabBar />
	</div>
</div>
