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/views/components/account-menu.blade.php
+9 -9
View File
@@ -37,13 +37,13 @@
<button
type="button"
aria-label="{{ $label }}"
data-account-menu
class="state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container"
data-md-account-menu
class="md-state-layer md-touch-target md-focus-ring"
>
@if ($image)
{{-- Behind the state layer (`state-layer` paints its ::before at z-index -1), so an
avatar image still shows the hover and pressed states over it. --}}
<img src="{{ $avatar }}" alt="" class="relative -z-20 size-full rounded-corner-full object-cover" />
{{-- Behind the state layer (md-state-layer paints its ::before at z-index -1), so
an avatar image still shows the hover and pressed states over it. --}}
<img src="{{ $avatar }}" alt="" data-md-account-menu-avatar />
@elseif (filled($initials))
{{ $initials }}
@else
@@ -53,12 +53,12 @@
</x-slot:trigger>
@if (filled($name) || filled($email))
<div class="px-3 pt-2 pb-3">
<div data-md-account-menu-header>
@if (filled($name))
<p class="truncate type-title-sm text-on-surface">{{ $name }}</p>
<p class="md-truncate md-type-title-sm md-ink">{{ $name }}</p>
@endif
@if (filled($email))
<p class="truncate type-body-sm text-on-surface-variant">{{ $email }}</p>
<p class="md-truncate md-type-body-sm md-ink-variant">{{ $email }}</p>
@endif
</div>
@@ -68,7 +68,7 @@
{{ $slot }}
@if ($theme)
<x-livewire-material::menu-item icon="contrast" x-on:click="$store.theme.toggle()" data-account-theme>
<x-livewire-material::menu-item icon="contrast" x-on:click="$store.theme.toggle()" data-md-account-menu-theme>
<span x-text="$store.theme.resolved === 'dark' ? @js(__('Light theme')) : @js(__('Dark theme'))">{{ __('Theme') }}</span>
</x-livewire-material::menu-item>
@endif