diff --git a/frontend/src/lib/nav/nav.test.ts b/frontend/src/lib/nav/nav.test.ts index 0653e82..eff19e5 100644 --- a/frontend/src/lib/nav/nav.test.ts +++ b/frontend/src/lib/nav/nav.test.ts @@ -56,5 +56,35 @@ describe('nav config', () => { it('does not match unrelated route', () => { expect(isActiveRoute('/planner', '/recipes')).toBe(false); }); + + it('matches when pathname is in extraPaths', () => { + expect(isActiveRoute('/settings', '/household/staples', ['/household/staples'])).toBe(true); + }); + + it('matches sub-route of extraPath', () => { + expect(isActiveRoute('/settings', '/household/staples/edit', ['/household/staples'])).toBe(true); + }); + + it('does not match extraPath with similar prefix', () => { + expect(isActiveRoute('/settings', '/household/staples-old', ['/household/staples'])).toBe(false); + }); + + it('returns false when extraPaths provided but no match', () => { + expect(isActiveRoute('/settings', '/members', ['/household/staples'])).toBe(false); + }); + }); + + describe('NavItem extraPaths', () => { + it('Einstellungen desktop nav item includes /household/staples in extraPaths', () => { + const einstellungen = desktopNavSections + .flatMap((s) => s.items) + .find((i) => i.href === '/settings'); + expect(einstellungen?.extraPaths).toContain('/household/staples'); + }); + + it('Einstellungen mobile nav item includes /household/staples in extraPaths', () => { + const einstellungen = mobileNavItems.find((i) => i.href === '/settings'); + expect(einstellungen?.extraPaths).toContain('/household/staples'); + }); }); }); diff --git a/frontend/src/lib/nav/nav.ts b/frontend/src/lib/nav/nav.ts index 883bdcb..76657e6 100644 --- a/frontend/src/lib/nav/nav.ts +++ b/frontend/src/lib/nav/nav.ts @@ -2,6 +2,7 @@ export interface NavItem { href: string; label: string; icon: string; + extraPaths?: string[]; } export interface NavSection { @@ -13,11 +14,15 @@ export const mobileNavItems: NavItem[] = [ { href: '/planner', label: 'Planer', icon: '📅' }, { href: '/recipes', label: 'Rezepte', icon: '📖' }, { href: '/shopping', label: 'Einkauf', icon: '🛒' }, - { href: '/settings', label: 'Einstellungen', icon: '⚙️' } + { href: '/settings', label: 'Einstellungen', icon: '⚙️', extraPaths: ['/household/staples'] } ]; -export function isActiveRoute(href: string, pathname: string): boolean { - return pathname === href || pathname.startsWith(href + '/'); +export function isActiveRoute(href: string, pathname: string, extraPaths?: string[]): boolean { + if (pathname === href || pathname.startsWith(href + '/')) return true; + if (extraPaths) { + return extraPaths.some((p) => pathname === p || pathname.startsWith(p + '/')); + } + return false; } export const desktopNavSections: NavSection[] = [ @@ -33,7 +38,7 @@ export const desktopNavSections: NavSection[] = [ title: 'Haushalt', items: [ { href: '/members', label: 'Mitglieder', icon: '👥' }, - { href: '/settings', label: 'Einstellungen', icon: '⚙️' } + { href: '/settings', label: 'Einstellungen', icon: '⚙️', extraPaths: ['/household/staples'] } ] } ];