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

Open a menu in a bottom sheet on a compact window

Browse Source 
Plan step 22, item 8 (actions.md § Missing, "Adaptive menu → bottom sheet
at compact"): M3 says "at compact breakpoints, consider swapping a menu for
a bottom sheet", and nothing connected <x-menu> to <x-bottom-sheet>.

<x-menu sheet-at-compact> draws its slot twice, in the popover and in a
modal <x-bottom-sheet> teleported to <body>, and below `medium`
(upTo('medium')) the trigger opens the sheet. The trigger says
aria-haspopup="dialog" there and "menu" from medium, aria-expanded in
both. Items keep their roles and the APG keyboard in the sheet; choosing
one, Escape or Tab close it and return focus to the trigger; a submenu
opens in place under its item; `filter` works in both; a resize across
600px closes whichever is open. The sheet has a fixed id that menu.js
makes unique and keeps as its wire:key, and the lists are keyed, so a
Livewire render patches an open sheet instead of swapping it.

bottom-sheet.blade.php is used as is. The filter now finds its field and
empty row per list instead of through x-refs.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 11:30:55 +02:00
co-authored by Claude Opus 5
parent 12cdeaaf67
commit deb1442dfb
7 changed files with 648 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/menus.blade.php
+19 -1
View File
@@ -60,6 +60,23 @@
<x-menu-item label="Delete" icon="delete" />
</x-menu>
BLADE,
'A bottom sheet on a phone, a menu from medium' => <<<'BLADE'
<x-menu label="Photo actions" sheet-at-compact>
<x-slot:trigger>
<x-button label="Photo" icon="photo" icon-right="arrow_drop_down" variant="outlined" />
</x-slot:trigger>
<x-menu-item label="Set as wallpaper" icon="wallpaper" description="Home and lock screen" />
<x-menu-item label="Add to album" icon="photo_album" submenu>
<x-menu-item label="Holidays" icon="beach_access" />
<x-menu-item label="Family" icon="family_restroom" />
<x-menu-item label="Favourites" icon="favorite" />
</x-menu-item>
<x-menu-item label="Print" icon="print" shortcut="⌘P" />
<x-menu-separator />
<x-menu-item label="Delete" icon="delete" />
</x-menu>
BLADE,
'Clusters: a gap, or a divider' => <<<'BLADE'
<x-menu label="Grouped by a gap">
<x-slot:trigger>
@@ -128,7 +145,8 @@
<p class="max-w-3xl type-body-md text-on-surface-variant">
<code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
&mdash; Right to enter it, Left to come back.
&mdash; Right to enter it, Left to come back. A <code>sheet-at-compact</code> menu opens the same items in a bottom sheet
below 600px, where a submenu opens in place: narrow the window to see it.
</p>
@foreach ($examples as $title => $code)