Andreas Reinhold / reiniandClaude Opus 5
ab692b66bb
M3 Expressive's flexible navigation bar, the collapsed, expanded and modal navigation rail with its state applied before the first paint, and an adaptive app shell composing them. The head script now restores the theme and rail attributes that wire:navigate strips from <html>. Completes Phase 8. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
25 lines
923 B
PHP
25 lines
923 B
PHP
{{-- A group of destinations in an `<x-navigation-rail>` under a heading.
|
|
|
|
<x-navigation-rail-section label="Labels">
|
|
<x-navigation-rail-item label="Travel" icon="label" link="/labels/travel" />
|
|
<x-navigation-rail-item label="Receipts" icon="label" link="/labels/receipts" />
|
|
</x-navigation-rail-section>
|
|
|
|
The heading (title-small, on-surface-variant, in line with the icons) shows only while the
|
|
rail is expanded, as M3 draws section headers; collapsed, a little space sets the group apart.
|
|
It names the group for screen readers either way. --}}
|
|
|
|
@props([
|
|
'label',
|
|
])
|
|
|
|
@php
|
|
$headingId = 'navigation-section-'.substr(md5((string) $label), 0, 10);
|
|
@endphp
|
|
|
|
<div role="group" aria-labelledby="{{ $headingId }}" data-navigation-rail-section {{ $attributes }}>
|
|
<p id="{{ $headingId }}" data-navigation-rail-heading>{{ $label }}</p>
|
|
|
|
{{ $slot }}
|
|
</div>
|