Andreas Reinhold / reiniandClaude Opus 5
0013e0154d
Plan step 35: <x-app-shell> becomes <x-scaffold>, M3's and Compose's name for the structure of bars, rails and panes, with no alias; every package view, the showcase, the tests, the skills, README and UPGRADE follow. Its markup and Tailwind classes stay for the navigation rewrite. The new fab slot places the FAB as Compose's Scaffold does - bottom-end, 16px from the edges below medium and 24px from it, clear of the navigation bar and of a snackbar on screen (resources/css/layout/scaffold.css) - and the content region tells a pane inside that the margin is already drawn. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
67 lines
3.3 KiB
PHP
67 lines
3.3 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 medium: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.
|
||
|
||
`tall` is M3's other container: 80px (NavigationBarTokens.TallContainerHeight) with the
|
||
vertical item layout at every width — icon over label, never side by side — for a bar whose
|
||
labels need the room. The short bar stays the default.
|
||
|
||
`hide-on-scroll` is M3's scrolling behaviour: the bar slides out of the window on a scroll
|
||
down and springs back on a scroll up, never before the first screenful has gone by, and never
|
||
while a snackbar, a bottom sheet or a drawer is on screen — those are anchored to the bar's
|
||
edge and would slide with it. Focus reaching the bar brings it back, which is as close as the
|
||
web gets to M3's "never hide it while a screen reader is active". Inside `<x-scaffold>`
|
||
`--material-bottom-bar` follows the bar down and up, so a `fab` button, the snackbar and the
|
||
page's bottom padding keep their distance from it rather than from where it was.
|
||
|
||
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-scaffold>` does both, and lifts the snackbar and a
|
||
`fab` button above it through `--material-bottom-bar`.
|
||
|
||
`label` names the landmark ("Main" by default); `tall` picks the 80px container;
|
||
`hide-on-scroll` lets it leave the window while the page scrolls down.
|
||
|
||
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,
|
||
'tall' => false,
|
||
'hideOnScroll' => false,
|
||
])
|
||
|
||
<nav
|
||
aria-label="{{ $label ?? __('Main') }}"
|
||
data-navigation-bar
|
||
@if ($tall) data-tall @endif
|
||
@if ($hideOnScroll)
|
||
data-hide-on-scroll
|
||
x-data="materialNavigationBar"
|
||
x-bind:data-hidden="away ? '' : null"
|
||
x-on:focusin="show()"
|
||
@endif
|
||
{{ $attributes }}
|
||
>
|
||
<div data-navigation-bar-items>
|
||
{{ $slot }}
|
||
</div>
|
||
</nav>
|