feat: navbar + split list/catalog into separate pages

- Navbar component with List, Catalog, Categories tabs
- / = shopping list (unchecked items with add form)
- /catalog = full catalog with toggle
- /categories = category management
- Removed page titles (navbar indicates context)

1 files changed, 40 insertions, 0 deletions

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
new file mode 100644
index 0000000..2899bfc
--- /dev/null
+++ b/src/lib/components/Nav.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<nav class="navbar">
+	<a href="/" class:active={$page.url.pathname === '/'}>List</a>
+	<a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalog</a
+	>
+	<a href="/categories" class:active={$page.url.pathname === '/categories'}
+		>Categories</a
+	>
+</nav>
+
+<style>
+	.navbar {
+		display: flex;
+		gap: 0.25rem;
+		margin-bottom: 1.5rem;
+		border-bottom: 1px solid #ddd;
+		padding-bottom: 0.5rem;
+	}
+
+	.navbar a {
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem;
+		color: #333;
+		text-decoration: none;
+		font-size: 0.875rem;
+		transition: background 0.15s;
+	}
+
+	.navbar a:hover {
+		background: #f5f5f5;
+	}
+
+	.navbar a.active {
+		background: #333;
+		color: #fff;
+	}
+</style>