38 lines
1.9 KiB
PHP
38 lines
1.9 KiB
PHP
@props([
|
|
'href' => '#',
|
|
'active' => false,
|
|
'disabled' => false,
|
|
])
|
|
@php
|
|
// items-center, not baseline: the icon is a block-level svg (Tailwind's
|
|
// preflight makes it one) and must sit BESIDE the label, never above it.
|
|
// R18.
|
|
$base = 'relative flex min-h-11 items-center gap-3 rounded px-3 text-sm';
|
|
|
|
// The label is a flex row of its own so an icon handed to the default slot
|
|
// instead of the icon slot still lands next to the text. Passing it in the
|
|
// default slot put a display:block svg into an inline span and pushed the
|
|
// label onto a second line — the entry then stood twice as tall as every
|
|
// other one. Layout must not depend on which slot was used.
|
|
$label = 'flex min-w-0 items-center gap-3';
|
|
|
|
// Active is a soft pill with a 3px accent tab flush at its left edge — a
|
|
// physical "you are here" marker rather than a colour wash. The tab is a
|
|
// pseudo-element via before:, so it cannot push the label around.
|
|
$state = $active
|
|
? 'bg-surface-hover font-semibold text-ink before:absolute before:left-0 before:top-2.5 before:bottom-2.5 before:w-[3px] before:rounded-r before:bg-accent before:content-[\'\']'
|
|
: 'font-medium text-muted hover:bg-surface-hover hover:text-ink';
|
|
@endphp
|
|
@if ($disabled)
|
|
{{-- Section not built yet: a non-interactive item, never a dead link. --}}
|
|
<span aria-disabled="true" {{ $attributes->merge(['class' => $base.' cursor-not-allowed font-medium text-faint']) }}>
|
|
@isset($icon)<span class="shrink-0">{{ $icon }}</span>@endisset
|
|
<span class="{{ $label }}">{{ $slot }}</span>
|
|
</span>
|
|
@else
|
|
<a href="{{ $href }}" @if ($active) aria-current="page" @endif {{ $attributes->merge(['class' => $base.' '.$state]) }}>
|
|
@isset($icon)<span class="shrink-0">{{ $icon }}</span>@endisset
|
|
<span class="{{ $label }}">{{ $slot }}</span>
|
|
</a>
|
|
@endif
|