marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): pass extraPaths to isActiveRoute in DesktopSidebar and MobileTabBar

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 16:45:32 +02:00
parent 2ed5186ac8
commit b0fc9f55c1
4 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/nav/DesktopSidebar.svelte
View File

@@ -24,7 +24,7 @@
{section.title}
</p>
{#each section.items as item (item.href)}
{@const active = isActiveRoute(item.href, $page.url.pathname)}
{@const active = isActiveRoute(item.href, $page.url.pathname, item.extraPaths)}
<a
href={item.href}
aria-current={active ? 'page' : undefined}

15
frontend/src/lib/nav/DesktopSidebar.test.ts
View File

@@ -59,3 +59,18 @@ describe('DesktopSidebar', () => {
expect(widget).toBeInTheDocument();
});
});
describe('DesktopSidebar — extraPaths active state', () => {
it('marks Einstellungen active when on /household/staples', async () => {
const { readable } = await import('svelte/store');
vi.doMock('$app/stores', () => ({
page: readable({ url: new URL('http://localhost/household/staples') })
}));
vi.resetModules();
const { render: r, screen: s } = await import('@testing-library/svelte');
const { default: Sidebar } = await import('./DesktopSidebar.svelte');
r(Sidebar, { props: { appName: 'Test', householdName: 'Test' } });
const link = s.getByRole('link', { name: /einstellungen/i });
expect(link).toHaveAttribute('aria-current', 'page');
});
});

2
frontend/src/lib/nav/MobileTabBar.svelte
View File

@@ -8,7 +8,7 @@
class="fixed bottom-0 w-full flex justify-around bg-white border-t pb-[env(safe-area-inset-bottom,20px)] md:hidden"
>
{#each mobileNavItems as item (item.href)}
{@const active = isActiveRoute(item.href, $page.url.pathname)}
{@const active = isActiveRoute(item.href, $page.url.pathname, item.extraPaths)}
<a
href={item.href}
aria-current={active ? 'page' : undefined}

15
frontend/src/lib/nav/MobileTabBar.test.ts
View File

@@ -53,3 +53,18 @@ describe('MobileTabBar', () => {
expect(recipesLink).not.toHaveAttribute('aria-current');
});
});
describe('MobileTabBar — extraPaths active state', () => {
it('marks Einstellungen active when on /household/staples', async () => {
const { readable } = await import('svelte/store');
vi.doMock('$app/stores', () => ({
page: readable({ url: new URL('http://localhost/household/staples') })
}));
vi.resetModules();
const { render: r, screen: s } = await import('@testing-library/svelte');
const { default: TabBar } = await import('./MobileTabBar.svelte');
r(TabBar);
const link = s.getByRole('link', { name: /einstellungen/i });
expect(link).toHaveAttribute('aria-current', 'page');
});
});