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

feat(nav): add emoji icons to all nav components

Browse Source 
Renders emoji icons in MobileTabBar (stacked above label),
TabletNavBar (inline), and DesktopSidebar (16px, 20px column).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-02 14:03:53 +02:00
parent 4bd020fa16
commit 5c066d33ef
6 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,6 +32,7 @@
? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
: ''}"
>
<span class="w-[20px] text-[16px] text-center">{item.icon}</span>
{item.label}
</a>
{/each}

4
frontend/src/lib/nav/MobileTabBar.routes.test.ts
View File

@@ -23,11 +23,11 @@ describe('MobileTabBar active state per route', () => {
pageStore.set({ url: new URL(`http://localhost${route}`) });
const { unmount } = render(MobileTabBar);
const activeLink = screen.getByRole('link', { name: expectedActiveLabel });
const activeLink = screen.getByRole('link', { name: new RegExp(expectedActiveLabel) });
expect(activeLink).toHaveAttribute('aria-current', 'page');
const allLinks = screen.getAllByRole('link');
const inactiveLinks = allLinks.filter((link) => link.textContent?.trim() !== expectedActiveLabel);
const inactiveLinks = allLinks.filter((link) => !link.textContent?.includes(expectedActiveLabel));
for (const link of inactiveLinks) {
expect(link).not.toHaveAttribute('aria-current');
}

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

@@ -16,6 +16,7 @@
? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
: ''}"
>
<span class="text-[16px]">{item.icon}</span>
{item.label}
</a>
{/each}

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

@@ -39,6 +39,14 @@ describe('MobileTabBar', () => {
expect(plannerLink).toHaveAttribute('aria-current', 'page');
});
it('renders icons for each nav item', () => {
render(MobileTabBar);
expect(screen.getByText('📅')).toBeInTheDocument();
expect(screen.getByText('📖')).toBeInTheDocument();
expect(screen.getByText('🛒')).toBeInTheDocument();
expect(screen.getByText('⚙️')).toBeInTheDocument();
});
it('non-active items do not have aria-current', () => {
render(MobileTabBar);
const recipesLink = screen.getByRole('link', { name: /rezepte/i });

1
frontend/src/lib/nav/TabletNavBar.svelte
View File

@@ -16,6 +16,7 @@
? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
: ''}"
>
<span>{item.icon}</span>
{item.label}
</a>
{/each}

18
frontend/src/lib/nav/nav.ts
View File

@@ -10,10 +10,10 @@ export interface NavSection {
}
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' }
{ href: '/planner', label: 'Planer', icon: '📅' },
{ href: '/recipes', label: 'Rezepte', icon: '📖' },
{ href: '/shopping', label: 'Einkauf', icon: '🛒' },
{ href: '/settings', label: 'Einstellungen', icon: '⚙️' }
];
export function isActiveRoute(href: string, pathname: string): boolean {
@@ -24,16 +24,16 @@ 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' }
{ href: '/planner', label: 'Planer', icon: '📅' },
{ href: '/recipes', label: 'Rezepte', icon: '📖' },
{ href: '/shopping', label: 'Einkauf', icon: '🛒' }
]
},
{
title: 'Haushalt',
items: [
{ href: '/members', label: 'Mitglieder', icon: 'users' },
{ href: '/settings', label: 'Einstellungen', icon: 'settings' }
{ href: '/members', label: 'Mitglieder', icon: '👥' },
{ href: '/settings', label: 'Einstellungen', icon: '⚙️' }
]
}
];