31 lines
1.5 KiB
PHP
31 lines
1.5 KiB
PHP
@props(['crumbs' => []])
|
|
{{--
|
|
The bar the content scrolls under. Translucent with a blur rather than a
|
|
solid strip: on a light ground a solid bar reads as chrome bolted on top,
|
|
and the blur is the one borrowed detail worth keeping.
|
|
--}}
|
|
<header class="sticky top-0 z-30 flex h-[3.75rem] shrink-0 items-center gap-3 border-b border-line bg-[color-mix(in_srgb,var(--surface)_82%,transparent)] px-4 backdrop-blur-lg backdrop-saturate-150 lg:px-6">
|
|
<button type="button" class="lg:hidden inline-flex min-h-11 min-w-11 items-center justify-center rounded text-muted hover:bg-surface-hover"
|
|
@click="nav = true" aria-label="{{ __('dashboard.open_nav') }}">
|
|
<x-ui.icon name="menu" />
|
|
</button>
|
|
|
|
{{-- On a phone only the leaf survives: the trail is a desktop affordance,
|
|
and the intermediate crumbs push the page name off screen. --}}
|
|
<nav class="flex min-w-0 items-center gap-2 text-sm text-muted" aria-label="Breadcrumb">
|
|
@foreach ($crumbs as $i => $crumb)
|
|
@if ($i > 0)
|
|
<x-ui.icon name="chevron-down" class="size-3.5 -rotate-90 text-faint {{ $loop->last ? 'hidden sm:block' : 'hidden sm:block' }}" />
|
|
@endif
|
|
<span @class([
|
|
'min-w-0 truncate',
|
|
'font-semibold text-ink' => $loop->last,
|
|
'hidden sm:inline' => ! $loop->last,
|
|
])>{{ $crumb }}</span>
|
|
@endforeach
|
|
</nav>
|
|
|
|
<div class="flex-1"></div>
|
|
{{ $slot }}
|
|
</header>
|