noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let the rail centre its destinations

Browse Source 
Plan step 25 (navigation Missing): M3's "alignment: top or center; on tablets
prefer center alignment for reach" had no implementation — the rail was
top-aligned only. `<x-navigation-rail align="center">` centres the destinations
between the header and the footer, which stay at their ends because M3 keeps the
menu icon and the FAB top-aligned. `safe center` gives the top back the moment
there are more destinations than fit, where centring would push the first one
out of reach above the scroller.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:40:36 +02:00
co-authored by Claude Fable 5.1
parent cef350d739
commit a5acbe7f6b
5 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/navigation.css
+10
View File
@@ -443,6 +443,16 @@
padding-block: 0.5rem 1rem;
}
/* "Alignment: top or center; on tablets prefer center alignment for reach. Menu icon and FAB
are always top-aligned" (docs/reference/m3/components-navigation-selection-inputs.md
§ Navigation rail). Only the destinations move, then — the header and the footer stay at
their ends of the rail — and `safe` puts them back at the top the moment there are more of
them than fit, where centring would otherwise push the first one out of reach above the
scroller. */
[data-navigation-rail][data-align='center'] [data-navigation-rail-destinations] {
justify-content: safe center;
}
[data-navigation-rail-heading] {
display: flex;
align-items: center;