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

Draw the section navigation without Tailwind

Browse Source 
Plan step 36 (navigation group, third batch): <x-section-nav>'s class
lists move into resources/css/components/section-nav.css, keyed on
data-md-section-nav (data-md-section-nav-picker, its own trigger and
label) and <x-tabs>'s own hooks, reused whole rather than copied
(N-16's fix keeps the real scrollable tab bar it landed): the bar's
outline-variant divider, active indicator and aria-current colouring
are tabs.css's rules, not this file's. The picker's trigger takes the
shared md-focus-ring class and the fixed md-type-body-lg/md-ink/
md-text-start text classes for its own body-large type, since it is
prose on a plain button rather than a component's own type; icons
take a size prop instead of a size class.

Hooks renamed: data-section-nav to data-md-section-nav,
data-section-picker to data-md-section-nav-picker, updated in
TabsTest.php (which carries section-nav's render tests) and
tests/Browser/BarsTest.php.

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:40:39 +02:00
co-authored by Claude Sonnet 5
parent ed93222d22
commit f1cd6e4eb4
6 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/section-nav.blade.php
+10 -10
View File
@@ -40,17 +40,17 @@
$scrollable = count($items) >= 5;
@endphp
<div {{ $attributes->class(['min-w-0']) }} data-section-nav>
<div {{ $attributes }} data-md-section-nav>
@if ($current)
<div class="medium:hidden" data-section-picker>
<div data-md-section-nav-picker>
<x-livewire-material::menu :$label position="bottom-start">
<x-slot:trigger>
<button type="button" class="focus-ring flex h-12 w-[min(20rem,calc(100vw-2rem))] cursor-pointer items-center gap-3 rounded-corner-xs border border-outline px-4 text-start type-body-lg text-on-surface">
<button type="button" data-md-section-nav-trigger class="md-focus-ring md-type-body-lg md-ink md-text-start">
@isset($current['icon'])
<x-livewire-material::icon :name="$current['icon']" optical="20" class="size-5 text-on-surface-variant" />
<x-livewire-material::icon :name="$current['icon']" :size="20" class="md-ink-variant" />
@endisset
<span class="min-w-0 flex-1 truncate">{{ $current['title'] }}</span>
<x-livewire-material::icon name="arrow_drop_down" class="size-6 text-on-surface-variant" />
<span data-md-section-nav-trigger-label class="md-truncate">{{ $current['title'] }}</span>
<x-livewire-material::icon name="arrow_drop_down" class="md-ink-variant" />
</button>
</x-slot:trigger>
@@ -61,12 +61,12 @@
</div>
@endif
<nav aria-label="{{ $label }}" class="max-medium:hidden">
<nav aria-label="{{ $label }}">
<ul data-md-tabs-bar data-md-variant="secondary" @if ($scrollable) data-md-scrollable @endif>
@foreach ($items as $item)
@php($on = $isCurrent($item))
<li class="flex min-w-0">
<li>
<a
href="{{ $item['url'] }}"
data-md-tab
@@ -75,9 +75,9 @@
>
<span data-md-tab-content>
@isset($item['icon'])
<x-livewire-material::icon :name="$item['icon']" :filled="$on" optical="20" class="size-5" />
<x-livewire-material::icon :name="$item['icon']" :filled="$on" :size="20" />
@endisset
<span class="truncate">{{ $item['title'] }}</span>
<span class="md-truncate">{{ $item['title'] }}</span>
@if (filled($item['badge'] ?? null))
<x-livewire-material::badge :value="$item['badge']" />
@endif