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
41 lines
2.0 KiB
PHP
41 lines
2.0 KiB
PHP
{{-- M3 Expressive's flexible navigation bar: three to five destinations at the bottom of a
|
||
compact window.
|
||
|
||
<div class="fixed inset-x-0 bottom-0 z-30 sm:hidden">
|
||
<x-navigation-bar>
|
||
<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" active badge="12" />
|
||
<x-navigation-bar-item label="Starred" icon="star" link="/starred" />
|
||
<x-navigation-bar-item label="Sent" icon="send" link="/sent" />
|
||
</x-navigation-bar>
|
||
</div>
|
||
|
||
The short bar, 64px tall in surface-container, with the bottom safe area added under it. On a
|
||
bar narrower than 600px (M3's compact window) each item is the icon in a 56×32 indicator over a
|
||
label-medium label, and the items share the width equally. From 600px (medium) icon and label
|
||
sit side by side in a 40px pill and the items gather in the middle, with the padding Compose's
|
||
Centered arrangement gives three to six items. Both follow the bar's own width (a container
|
||
query), so a bar in a narrow column keeps the compact items.
|
||
|
||
It does not position itself: wrap it in the element that pins it (`fixed inset-x-0 bottom-0`)
|
||
and hides it where a rail takes over. `<x-app-shell>` does both, and lifts the snackbar and a
|
||
`fab` button above it through `--material-bottom-bar`.
|
||
|
||
`label` names the landmark ("Main" by default).
|
||
|
||
Values from androidx Compose Material 3 (Apache-2.0), androidx-main
|
||
27cf9a7d5788aa0f5f2d8b6699ce279560daf326: NavigationBarTokens.kt,
|
||
NavigationBarVerticalItemTokens.kt, NavigationBarHorizontalItemTokens.kt and
|
||
ShortNavigationBar.kt, all under
|
||
https://github.com/androidx/androidx/tree/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3
|
||
— the styles are resources/css/components/navigation.css. --}}
|
||
|
||
@props([
|
||
'label' => null,
|
||
])
|
||
|
||
<nav aria-label="{{ $label ?? __('Main') }}" data-navigation-bar {{ $attributes }}>
|
||
<div data-navigation-bar-items>
|
||
{{ $slot }}
|
||
</div>
|
||
</nav>
|