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' ? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
: ''}" : ''}"
> >
<span class="w-[20px] text-[16px] text-center">{item.icon}</span>
{item.label} {item.label}
</a> </a>
{/each} {/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}`) }); pageStore.set({ url: new URL(`http://localhost${route}`) });
const { unmount } = render(MobileTabBar); 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'); expect(activeLink).toHaveAttribute('aria-current', 'page');
const allLinks = screen.getAllByRole('link'); 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) { for (const link of inactiveLinks) {
expect(link).not.toHaveAttribute('aria-current'); 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' ? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
: ''}" : ''}"
> >
<span class="text-[16px]">{item.icon}</span>
{item.label} {item.label}
</a> </a>
{/each} {/each}

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

@@ -39,6 +39,14 @@ describe('MobileTabBar', () => {
expect(plannerLink).toHaveAttribute('aria-current', 'page'); 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', () => { it('non-active items do not have aria-current', () => {
render(MobileTabBar); render(MobileTabBar);
const recipesLink = screen.getByRole('link', { name: /rezepte/i }); 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' ? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
: ''}" : ''}"
> >
<span>{item.icon}</span>
{item.label} {item.label}
</a> </a>
{/each} {/each}

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

@@ -10,10 +10,10 @@ export interface NavSection {
} }
export const mobileNavItems: NavItem[] = [ export const mobileNavItems: NavItem[] = [
{ href: '/planner', label: 'Planer', icon: 'calendar' }, { href: '/planner', label: 'Planer', icon: '📅' },
{ href: '/recipes', label: 'Rezepte', icon: 'book' }, { href: '/recipes', label: 'Rezepte', icon: '📖' },
{ href: '/shopping', label: 'Einkauf', icon: 'shopping-cart' }, { href: '/shopping', label: 'Einkauf', icon: '🛒' },
{ href: '/settings', label: 'Einstellungen', icon: 'settings' } { href: '/settings', label: 'Einstellungen', icon: '⚙️' }
]; ];
export function isActiveRoute(href: string, pathname: string): boolean { export function isActiveRoute(href: string, pathname: string): boolean {
@@ -24,16 +24,16 @@ export const desktopNavSections: NavSection[] = [
{ {
title: 'Plan', title: 'Plan',
items: [ items: [
{ href: '/planner', label: 'Planer', icon: 'calendar' }, { href: '/planner', label: 'Planer', icon: '📅' },
{ href: '/recipes', label: 'Rezepte', icon: 'book' }, { href: '/recipes', label: 'Rezepte', icon: '📖' },
{ href: '/shopping', label: 'Einkauf', icon: 'shopping-cart' } { href: '/shopping', label: 'Einkauf', icon: '🛒' }
] ]
}, },
{ {
title: 'Haushalt', title: 'Haushalt',
items: [ items: [
{ href: '/members', label: 'Mitglieder', icon: 'users' }, { href: '/members', label: 'Mitglieder', icon: '👥' },
{ href: '/settings', label: 'Einstellungen', icon: 'settings' } { href: '/settings', label: 'Einstellungen', icon: '⚙️' }
] ]
} }
]; ];