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

Draw the account menu without Tailwind

Browse Source 
Plan step 36 (navigation group, third batch): <x-account-menu>'s class
lists move into resources/css/components/account-menu.css, keyed on
data-md-account-menu (the avatar trigger), data-md-account-menu-avatar
and data-md-account-menu-header. The trigger already carried the
target-extension and state-layer fixes from an earlier pass (N-01,
N-15); this rewrite only moves them onto the shared md-state-layer/
md-touch-target/md-focus-ring classes and their z-index-ordering
comment into the stylesheet. The header's name and email keep their
type and ink as the fixed text classes on the view
(md-type-title-sm/md-ink, md-type-body-sm/md-ink-variant), since they
are the caller's own prose.

Hooks renamed: data-account-menu to data-md-account-menu,
data-account-theme to data-md-account-menu-theme, updated in
AppBarTest.php, which carries account-menu's render tests.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 00:42:28 +02:00
co-authored by Claude Sonnet 5
parent f1cd6e4eb4
commit f5c90c3874
5 changed files with 79 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/account-menu.css
+53
View File
@@ -0,0 +1,53 @@
/*
* <x-account-menu>: the avatar trigger of an `<x-menu>`, its name-and-email header and its theme
* item — an M3 "extra" the audit found already inside the foundations (docs/audits/m3-alignment/
* navigation.md): a 40px trigger reaching M3's 48px target through `md-touch-target` (N-01), with
* `md-state-layer` for the hover and pressed feedback every other trigger in the library already
* has (N-15) and `md-focus-ring` for its keyboard ring. The avatar image sits behind the state
* layer's `::before` (z-index -1, foundation/interaction.css) at z-index -2, so a hover or a press
* still washes over the picture instead of under it; nothing clips the pseudo-target the touch
* class draws past the 40px circle.
*
* `[data-md-account-menu-header]` is the name-and-email block above the separator; its own type and
* ink are the fixed text classes on the view (`md-type-title-sm md-ink`, `md-type-body-sm
* md-ink-variant`), since this is prose the caller supplies, not the component's own part.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './menu.css';
@import './menu-separator.css';
@import './menu-item.css';
@import './icon.css';
@layer material.components {
[data-md-account-menu] {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
inline-size: var(--md-sys-measurement-space500);
block-size: var(--md-sys-measurement-space500);
border-radius: var(--md-sys-shape-corner-full);
cursor: pointer;
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
font: var(--md-sys-typescale-label-lg);
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
font-variation-settings: normal;
}
[data-md-account-menu-avatar] {
position: relative;
z-index: -2;
inline-size: 100%;
block-size: 100%;
border-radius: var(--md-sys-shape-corner-full);
object-fit: cover;
}
[data-md-account-menu-header] {
padding-inline: 12px;
padding-block: var(--md-sys-measurement-space100) 12px;
}
}