Let the navigation bar hide on a scroll down

Plan step 25 (navigation Missing): M3's "hides on scroll-down, reappears on
scroll-up" had no implementation. `<x-navigation-bar hide-on-scroll>` slides the
bar out on the default spatial spring — an instant swap under reduced motion,
which zeroes the duration token — and never while a snackbar, a bottom sheet or
a drawer is anchored to its edge; focus reaching the bar brings it back.
`<x-app-shell hide-bar-on-scroll>` picks it, and --material-bottom-bar follows
the bar down and up so a `fab` button and the snackbar keep their offsets.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/app-shell.blade.php

@@ -55,7 +55,8 @@
      itself. The rail is one element at every width, so what is in it is also in the modal rail a
      phone opens. `label` names both navigation landmarks ("Main"); `rail-width` is the expanded
      rail's width; `tall-bar` picks M3's 80px navigation bar over the 64px one, and the bottom
-     offset every pinned thing reads follows it.
+     offset every pinned thing reads follows it; `hide-bar-on-scroll` lets the bar leave the window
+     while the page scrolls down, and `--material-bottom-bar` goes down and comes back with it.
 
      `banner` or `top` is a decision about what the bar belongs to: an application-wide bar — one
      search, one account menu, the same on every page — spans the window and the rail starts under
@@ -84,6 +85,7 @@
     'label' => null,
     'railWidth' => '16rem',
     'tallBar' => false,
+    'hideBarOnScroll' => false,
 ])
 
 @php
@@ -177,7 +179,7 @@
 
     @if ($barItems->isNotEmpty())
         <div data-app-shell-bar class="fixed inset-x-0 bottom-0 z-30 medium:hidden">
-            <x-livewire-material::navigation-bar :label="$label" :tall="$tallBar">
+            <x-livewire-material::navigation-bar :label="$label" :tall="$tallBar" :hide-on-scroll="$hideBarOnScroll">
                 @foreach ($barItems as $item)
                     <x-livewire-material::navigation-bar-item :label="$item['title']" :icon="$item['icon']" :link="$item['url']" :active="$item['active']" :badge="$item['badge']" :badge-label="$item['badgeLabel']" :no-wire-navigate="! $item['navigate']" />
                 @endforeach

resources/views/components/navigation-bar.blade.php

@@ -20,11 +20,20 @@
      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-app-shell>`
+     `--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-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); `tall` picks the 80px container.
+     `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,
@@ -36,9 +45,21 @@
 @props([
     'label' => null,
     'tall' => false,
+    'hideOnScroll' => false,
 ])
 
-<nav aria-label="{{ $label ?? __('Main') }}" data-navigation-bar @if ($tall) data-tall @endif {{ $attributes }}>
+<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>