From 8f33f469de776ed8e4d72e1c8128d40a0c337769 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 2 Apr 2026 13:14:12 +0200
Subject: [PATCH] feat(nav): add TabletNavBar with horizontal pills and active
 state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/nav/TabletNavBar.svelte  | 22 +++++++++++++
 frontend/src/lib/nav/TabletNavBar.test.ts | 38 +++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 frontend/src/lib/nav/TabletNavBar.svelte
 create mode 100644 frontend/src/lib/nav/TabletNavBar.test.ts

diff --git a/frontend/src/lib/nav/TabletNavBar.svelte b/frontend/src/lib/nav/TabletNavBar.svelte
new file mode 100644
index 0000000..3e5e63f
--- /dev/null
+++ b/frontend/src/lib/nav/TabletNavBar.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { mobileNavItems } from './nav';
+</script>
+
+<nav
+	aria-label="Hauptnavigation"
+	class="hidden md:flex lg:hidden gap-2 items-center p-2"
+>
+	{#each mobileNavItems as item (item.href)}
+		{@const active = $page.url.pathname.startsWith(item.href)}
+		<a
+			href={item.href}
+			aria-current={active ? 'page' : undefined}
+			class="px-4 py-2 rounded-[var(--radius-md)] text-[13px] font-[var(--font-sans)] {active
+				? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
+				: ''}"
+		>
+			{item.label}
+		</a>
+	{/each}
+</nav>
diff --git a/frontend/src/lib/nav/TabletNavBar.test.ts b/frontend/src/lib/nav/TabletNavBar.test.ts
new file mode 100644
index 0000000..3f20529
--- /dev/null
+++ b/frontend/src/lib/nav/TabletNavBar.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import TabletNavBar from './TabletNavBar.svelte';
+
+vi.mock('$app/stores', () => {
+	const { readable } = require('svelte/store');
+	return {
+		page: readable({ url: new URL('http://localhost/planner') })
+	};
+});
+
+describe('TabletNavBar', () => {
+	it('renders 4 nav items', () => {
+		render(TabletNavBar);
+		const links = screen.getAllByRole('link');
+		expect(links).toHaveLength(4);
+	});
+
+	it('renders correct labels', () => {
+		render(TabletNavBar);
+		expect(screen.getByText('Planer')).toBeInTheDocument();
+		expect(screen.getByText('Rezepte')).toBeInTheDocument();
+		expect(screen.getByText('Einkauf')).toBeInTheDocument();
+		expect(screen.getByText('Einstellungen')).toBeInTheDocument();
+	});
+
+	it('marks active item with aria-current="page"', () => {
+		render(TabletNavBar);
+		const plannerLink = screen.getByRole('link', { name: /planer/i });
+		expect(plannerLink).toHaveAttribute('aria-current', 'page');
+	});
+
+	it('renders as horizontal pill navigation', () => {
+		render(TabletNavBar);
+		const nav = screen.getByLabelText('Hauptnavigation');
+		expect(nav).toBeInTheDocument();
+	});
+});