feat(nav): add shared navigation config with mobile and desktop items
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
42
frontend/src/lib/nav/nav.test.ts
Normal file
42
frontend/src/lib/nav/nav.test.ts
Normal file
@@ -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']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
35
frontend/src/lib/nav/nav.ts
Normal file
35
frontend/src/lib/nav/nav.ts
Normal file
@@ -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' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
Reference in New Issue
Block a user