From 5f423e365ada8aae63ad07099031a23252f47514 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 27 Jul 2026 20:44:10 +0200
Subject: 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)
---
 src/lib/components/Nav.svelte | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/lib/components/Nav.svelte

(limited to 'src/lib/components/Nav.svelte')

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>
-- 
cgit v1.3