{{-- The navigation inside one area of an app — the sections of settings, of an admin — which is a single destination in the app's own navigation. `items`, a list of `['title' => …, 'url' => …]` with an optional `icon`, `active` and `badge` (an item is current when `active` is true, or when its `url` is the page's). From `medium` (600px) they are M3's secondary tabs as links, the current one underlined; on a compact window, where a row of them never fits, a button naming the current section opens a menu of all of them, the current one marked `aria-current="page"` and each with its badge. The same list is rendered for both, and CSS shows one. The page's URL is `Livewire::originalUrl()`: while a Livewire component on the page updates, the request is Livewire's update endpoint, and comparing with it left no section lit. Up to four sections share the row as fixed tabs, a title too long for its share wrapping to a second line and truncating there, the bar growing to hold it, as M3 lets a fixed tab's label ("may wrap to a max second line if needed with truncation"); each tab renders ``'s label anatomy, `data-md-tab-label` around `data-md-tab-text` and the badge, so tabs.css draws both alike. From five the row is M3's scrollable tab bar — each tab as wide as its own label, the set scrolling sideways, offset 52dp from the leading edge so it reads as scrollable — which is M3's own answer to a row that will not fit, and the one its accessibility page blesses ("horizontal scrolling tabs meet accessibility requirements because they need to increase in width to respond to label text without affecting the layout"). An earlier version wrapped them onto a grid instead, which left the bar's divider under the last row only and stranded the upper rows' indicators against nothing. `label` names the navigation ("Sections"). Links use `wire:navigate` unless `no-wire-navigate`. --}} @props([ 'items' => [], 'label' => null, 'noWireNavigate' => false, ]) @php $label ??= __('Sections'); $page = \Livewire\Livewire::originalUrl(); $isCurrent = fn (array $item): bool => ($item['active'] ?? false) || (filled($item['url'] ?? null) && $page === url($item['url'])); $current = collect($items)->first($isCurrent) ?? ($items[0] ?? null); // Up to four share the row as fixed tabs, a long title wrapping to a second line and truncating // there (tabs.css); from five they are M3's scrollable tabs, which give longer titles room. $scrollable = count($items) >= 5; @endphp
@if ($current)
@foreach ($items as $item) @endforeach
@endif