22 lines
1.5 KiB
PHP
22 lines
1.5 KiB
PHP
@props(['icon', 'href' => '#', 'active' => false, 'badge' => null, 'badgeTitle' => null, 'badgeKey' => null])
|
|
<a {{ $attributes->class([
|
|
'group flex min-h-11 items-center gap-3 rounded-md border px-3 py-2 text-sm transition-colors',
|
|
'border-accent/25 bg-accent/10 text-ink shadow-[inset_2px_0_0_var(--color-accent)]' => $active,
|
|
'border-transparent text-ink-2 hover:bg-raised hover:text-ink' => ! $active,
|
|
])->merge(['href' => $href]) }}
|
|
@if ($active) aria-current="page" @endif>
|
|
<x-icon :name="$icon" @class(['h-[18px] w-[18px] shrink-0', 'text-accent' => $active]) />
|
|
<span class="truncate">{{ $slot }}</span>
|
|
@if ($badgeKey !== null)
|
|
{{-- Live badge: always in the DOM (hidden at zero) so the navBadges poller can update it
|
|
in place without a page re-render. --}}
|
|
<span data-nav-badge="{{ $badgeKey }}"
|
|
class="ml-auto inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-accent px-1 font-mono text-[10px] font-semibold tabular-nums text-void"
|
|
@if ($badge === null || $badge === '' || $badge === 0) hidden @endif
|
|
@if ($badgeTitle) title="{{ $badgeTitle }}" @endif>{{ $badge }}</span>
|
|
@elseif ($badge !== null && $badge !== '')
|
|
<span class="ml-auto inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-accent px-1 font-mono text-[10px] font-semibold tabular-nums text-void"
|
|
@if ($badgeTitle) title="{{ $badgeTitle }}" @endif>{{ $badge }}</span>
|
|
@endif
|
|
</a>
|