feat(nav): add AppShell layout with breakpoint-switched navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/nav/AppShell.svelte

@@ -0,0 +1,19 @@
+<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>

frontend/src/lib/nav/AppShell.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import AppShell from './AppShell.svelte';
+
+vi.mock('$app/stores', () => {
+	const { readable } = require('svelte/store');
+	return {
+		page: readable({ url: new URL('http://localhost/planner') })
+	};
+});
+
+describe('AppShell', () => {
+	const defaultProps = { appName: 'Mealprep', householdName: 'Familie Müller' };
+
+	it('renders the DesktopSidebar', () => {
+		render(AppShell, { props: defaultProps });
+		expect(screen.getByTestId('variety-widget-slot')).toBeInTheDocument();
+	});
+
+	it('renders the MobileTabBar nav', () => {
+		render(AppShell, { props: defaultProps });
+		const navs = screen.getAllByLabelText('Hauptnavigation');
+		expect(navs.length).toBeGreaterThanOrEqual(2);
+	});
+
+	it('renders a main content area', () => {
+		render(AppShell, { props: defaultProps });
+		expect(screen.getByRole('main')).toBeInTheDocument();
+	});
+
+	it('renders all navigation links from all nav variants', () => {
+		render(AppShell, { props: defaultProps });
+		const links = screen.getAllByRole('link');
+		// Mobile: 4, Tablet: 4, Desktop: 5 = 13 total
+		expect(links).toHaveLength(13);
+	});
+});