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

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { mobileNavItems, desktopNavSections } from './nav';
+
+describe('nav config', () => {
+	describe('mobileNavItems', () => {
+		it('has exactly 4 items', () => {
+			expect(mobileNavItems).toHaveLength(4);
+		});
+
+		it('contains Planner, Recipes, Shopping, Settings in order', () => {
+			const labels = mobileNavItems.map((item) => item.label);
+			expect(labels).toEqual(['Planer', 'Rezepte', 'Einkauf', 'Einstellungen']);
+		});
+
+		it('each item has href, label, and icon', () => {
+			for (const item of mobileNavItems) {
+				expect(item).toHaveProperty('href');
+				expect(item).toHaveProperty('label');
+				expect(item).toHaveProperty('icon');
+				expect(item.href).toMatch(/^\//);
+			}
+		});
+	});
+
+	describe('desktopNavSections', () => {
+		it('has 2 sections: Plan and Household', () => {
+			expect(desktopNavSections).toHaveLength(2);
+			expect(desktopNavSections[0].title).toBe('Plan');
+			expect(desktopNavSections[1].title).toBe('Haushalt');
+		});
+
+		it('Plan section has Planner, Recipes, Shopping', () => {
+			const labels = desktopNavSections[0].items.map((item) => item.label);
+			expect(labels).toEqual(['Planer', 'Rezepte', 'Einkauf']);
+		});
+
+		it('Household section has Members, Settings', () => {
+			const labels = desktopNavSections[1].items.map((item) => item.label);
+			expect(labels).toEqual(['Mitglieder', 'Einstellungen']);
+		});
+	});
+});

frontend/src/lib/nav/nav.ts

@@ -0,0 +1,35 @@
+export interface NavItem {
+	href: string;
+	label: string;
+	icon: string;
+}
+
+export interface NavSection {
+	title: string;
+	items: NavItem[];
+}
+
+export const mobileNavItems: NavItem[] = [
+	{ href: '/planner', label: 'Planer', icon: 'calendar' },
+	{ href: '/recipes', label: 'Rezepte', icon: 'book' },
+	{ href: '/shopping', label: 'Einkauf', icon: 'shopping-cart' },
+	{ href: '/settings', label: 'Einstellungen', icon: 'settings' }
+];
+
+export const desktopNavSections: NavSection[] = [
+	{
+		title: 'Plan',
+		items: [
+			{ href: '/planner', label: 'Planer', icon: 'calendar' },
+			{ href: '/recipes', label: 'Rezepte', icon: 'book' },
+			{ href: '/shopping', label: 'Einkauf', icon: 'shopping-cart' }
+		]
+	},
+	{
+		title: 'Haushalt',
+		items: [
+			{ href: '/members', label: 'Mitglieder', icon: 'users' },
+			{ href: '/settings', label: 'Einstellungen', icon: 'settings' }
+		]
+	}
+];