From a62800e8fff977f3a0003ea56ba265cc41b03840 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 05:32:58 +0200 Subject: [PATCH] Rewrite the showcase's Navigation section without Tailwind Plan step 38 (last batch): the navigation-bar and navigation-rail demos' bounded frames become data-md-showcase-nav-demo (`bar`, `bar-wide` inside its own data-md-showcase-nav-scroll wrapper, `rail`, `rail-wide`), the "the page" filler is data-md-showcase-nav-page and the content pane beside a rail data-md-showcase-nav-content; a group of demos moves onto / with inline max-width styles for the two arbitrary demo widths (400px, 800px) Tailwind's arbitrary values gave them. The "Open the scaffold" link's md-link/md-ink-primary classes match bars.blade.php's. Every #navigation id, aria-label and visible label the Chromium NavigationTest (against its own probes and /material/shell) relies on is unchanged. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/showcase.css | 59 +++++++++++++ .../showcase/sections/navigation.blade.php | 82 +++++++++---------- 2 files changed, 100 insertions(+), 41 deletions(-) diff --git a/resources/css/showcase.css b/resources/css/showcase.css index 7d378eca..a4c87676 100644 --- a/resources/css/showcase.css +++ b/resources/css/showcase.css @@ -508,6 +508,65 @@ [data-md-showcase-tabs-narrow] { max-width: 384px; } + + /* Navigation: a bounded frame around one navigation-bar or navigation-rail demo. `bar` and + `bar-wide` stack the bar under a "the page" filler the way a scaffold does; `bar-wide` drops + its own edge because its horizontal-scroll wrapper (`data-md-showcase-nav-scroll`) already + draws one, and is wide enough (600px) that a bar showing icon beside label never wraps. + `rail` and `rail-wide` sit the rail beside a content pane the way a scaffold does; `rail-wide` + is full width, for the two examples with real body text beside the rail. */ + [data-md-showcase-nav-demo='bar'] { + display: flex; + flex-direction: column; + height: 224px; + overflow: hidden; + border-radius: var(--md-sys-shape-corner-lg); + border: 1px solid var(--md-sys-color-outline-variant); + background-color: var(--md-sys-color-surface); + } + + [data-md-showcase-nav-demo='bar-wide'] { + display: flex; + flex-direction: column; + height: 224px; + min-width: 600px; + background-color: var(--md-sys-color-surface); + } + + [data-md-showcase-nav-demo='rail'] { + display: flex; + height: 576px; + overflow: hidden; + border-radius: var(--md-sys-shape-corner-lg); + border: 1px solid var(--md-sys-color-outline-variant); + } + + [data-md-showcase-nav-demo='rail-wide'] { + display: flex; + width: 100%; + height: 480px; + overflow: hidden; + border-radius: var(--md-sys-shape-corner-lg); + border: 1px solid var(--md-sys-color-outline-variant); + } + + [data-md-showcase-nav-scroll] { + overflow-x: auto; + border-radius: var(--md-sys-shape-corner-lg); + border: 1px solid var(--md-sys-color-outline-variant); + } + + [data-md-showcase-nav-page] { + flex: 1 1 auto; + padding: var(--md-sys-measurement-space200); + } + + [data-md-showcase-nav-content] { + flex: 1 1 auto; + min-width: 0; + background-color: var(--md-sys-color-surface-container-low); + padding: var(--md-sys-measurement-space300); + } } /* A handful of call sites (, , ) forward only `class` and diff --git a/resources/views/showcase/sections/navigation.blade.php b/resources/views/showcase/sections/navigation.blade.php index 4143aff3..10daca09 100644 --- a/resources/views/showcase/sections/navigation.blade.php +++ b/resources/views/showcase/sections/navigation.blade.php @@ -1,11 +1,11 @@ @php $examples = [ 'Navigation bar' => <<<'BLADE' -
-
-

Compact: icon over label

-
-
The page
+ + +

Compact: icon over label

+
+
The page
@@ -13,13 +13,13 @@
-
+ -
-

From 600px wide: icon beside label, centred

-
-
-
The page
+ +

From 600px wide: icon beside label, centred

+
+
+
The page
@@ -28,25 +28,25 @@
-
+ -
-

Hide on scroll: scroll the page down, then up

-
-
The bar follows the window's scrolling, not this box's: scroll the showcase down and it leaves, scroll up and it springs back. It stays while a snackbar or a bottom sheet is on screen.
+ +

Hide on scroll: scroll the page down, then up

+
+
The bar follows the window's scrolling, not this box's: scroll the showcase down and it leaves, scroll up and it springs back. It stays while a snackbar or a bottom sheet is on screen.
-
+ -
-

Tall (80px): icon over label whatever the width

-
-
-
The page
+ +

Tall (80px): icon over label whatever the width

+
+
+
The page
@@ -55,12 +55,12 @@
-
-
+ + BLADE, 'Collapsed, narrow (centred) and expanded rails' => <<<'BLADE' -
-
+ +
@@ -80,7 +80,7 @@
-
+
@@ -96,7 +96,7 @@
-
+
@@ -115,13 +115,13 @@
-
+ BLADE, 'Collapsible rail' => <<<'BLADE' -
+
- Mail + Mail @@ -133,16 +133,16 @@ -
+
The menu button collapses and expands the rail, and the FAB morphs into an extended FAB with it. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <x-scaffold>'s from expanded (840px) too.
BLADE, 'Rail that hides when collapsed' => <<<'BLADE' -
+
- Studio + Studio @@ -150,25 +150,25 @@ -
+

M3's other expanded behaviour: collapsing this rail takes it out of the layout instead of narrowing it to 96px, so an immersive page gets the whole window. The only way back is a menu button of the application's own — its own button then docks it again.

-
+
BLADE, ]; @endphp - +