45490ebaac
text-[9px] is below WCAG practical minimum and unreadable for senior users. Changed all three occurrences (tablet button count, desktop link label, flyout link label) to text-[11px]. Fixes @leonievoss: "text-[9px] is below 12px minimum" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91 lines
2.6 KiB
Svelte
91 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
href: string;
|
|
label: string;
|
|
isActive: boolean;
|
|
count?: number;
|
|
topBorder?: boolean;
|
|
icon: Snippet;
|
|
variant?: 'sidebar' | 'flyout';
|
|
onTabletTrigger?: (event: MouseEvent) => void;
|
|
onFlyoutClick?: () => void;
|
|
}
|
|
|
|
let {
|
|
href,
|
|
label,
|
|
isActive,
|
|
count,
|
|
topBorder = false,
|
|
icon,
|
|
variant = 'sidebar',
|
|
onTabletTrigger,
|
|
onFlyoutClick
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
{#if variant === 'sidebar'}
|
|
<!-- Tablet button (visible at md, hidden at lg) -->
|
|
<button
|
|
data-flyout-trigger
|
|
type="button"
|
|
aria-label={label}
|
|
title={label}
|
|
onclick={onTabletTrigger}
|
|
class="flex min-h-[44px] w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
|
{topBorder ? 'border-t border-white/10' : ''}
|
|
{isActive ? 'border-brand-mint bg-white/10' : (topBorder ? 'border-l-transparent hover:bg-white/5' : 'border-transparent hover:bg-white/5')}"
|
|
>
|
|
{@render icon()}
|
|
{#if count !== undefined}
|
|
<span class="text-[11px] font-bold {isActive ? 'text-white/80' : 'text-white/35'}"
|
|
>{count}</span
|
|
>
|
|
{/if}
|
|
</button>
|
|
|
|
<!-- Desktop link (hidden at md, visible at lg) -->
|
|
<a
|
|
href={href}
|
|
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
|
{topBorder ? 'border-t border-white/10' : ''}
|
|
{isActive ? 'border-brand-mint bg-white/10' : (topBorder ? 'border-l-transparent hover:bg-white/5' : 'border-transparent hover:bg-white/5')}"
|
|
aria-current={isActive ? 'page' : undefined}
|
|
title={label}
|
|
>
|
|
{@render icon()}
|
|
{#if count !== undefined}
|
|
<span class="text-[13px] font-black {isActive ? 'text-white/65' : 'text-white/50'}"
|
|
>{count}</span
|
|
>
|
|
{/if}
|
|
<span
|
|
class="text-[11px] font-extrabold tracking-[0.5px] uppercase {isActive ? 'text-white' : 'text-white/55'}"
|
|
>{label}</span
|
|
>
|
|
</a>
|
|
{:else}
|
|
<!-- Flyout link -->
|
|
<a
|
|
href={href}
|
|
onclick={onFlyoutClick}
|
|
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
|
{topBorder ? 'border-t border-white/10' : ''}
|
|
{isActive ? 'border-brand-mint bg-white/10' : (topBorder ? 'border-l-transparent hover:bg-white/5' : 'border-transparent hover:bg-white/5')}"
|
|
aria-current={isActive ? 'page' : undefined}
|
|
>
|
|
{@render icon()}
|
|
{#if count !== undefined}
|
|
<span class="text-[13px] font-black {isActive ? 'text-white/65' : 'text-white/50'}"
|
|
>{count}</span
|
|
>
|
|
{/if}
|
|
<span
|
|
class="text-[11px] font-extrabold tracking-[0.5px] uppercase {isActive ? 'text-white' : 'text-white/55'}"
|
|
>{label}</span
|
|
>
|
|
</a>
|
|
{/if}
|