Andreas Reinhold / reiniandClaude Opus 5
ab692b66bb
M3 Expressive's flexible navigation bar, the collapsed, expanded and modal navigation rail with its state applied before the first paint, and an adaptive app shell composing them. The head script now restores the theme and rail attributes that wire:navigate strips from <html>. Completes Phase 8. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
48 lines
2.7 KiB
PHP
48 lines
2.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="robots" content="noindex" />
|
|
|
|
<title>@yield('title', 'Livewire Material')</title>
|
|
|
|
<x-theme-script />
|
|
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body class="min-h-screen bg-surface font-sans text-on-surface antialiased">
|
|
<header class="sticky top-0 z-10 border-b border-divider bg-surface-container">
|
|
<div class="mx-auto flex max-w-6xl items-center gap-x-6 px-4 py-3">
|
|
<a href="{{ route('livewire-material.showcase') }}" class="shrink-0 type-title-lg max-sm:hidden">Livewire Material</a>
|
|
|
|
<nav class="-my-2 flex min-w-0 flex-1 gap-x-4 overflow-x-auto py-2 whitespace-nowrap type-label-lg text-on-surface-variant [scrollbar-width:none]" aria-label="Sections">
|
|
@foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders', 'pickers' => 'Date pickers', 'timepickers' => 'Time pickers', 'bars' => 'Bars', 'navigation' => 'Navigation', 'data' => 'Data'] as $anchor => $section)
|
|
<a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
|
|
@endforeach
|
|
</nav>
|
|
|
|
<div class="ms-auto flex shrink-0 rounded-corner-full border border-outline" role="group" aria-label="Theme" x-data x-cloak>
|
|
@foreach (['light' => 'Light', 'dark' => 'Dark', 'system' => 'System'] as $choice => $label)
|
|
<button
|
|
type="button"
|
|
data-test="theme-{{ $choice }}"
|
|
class="state-layer focus-ring px-4 py-1.5 type-label-lg first:rounded-s-corner-full last:rounded-e-corner-full"
|
|
x-on:click="$store.theme.set('{{ $choice }}')"
|
|
x-bind:class="$store.theme.choice === '{{ $choice }}' && 'bg-secondary-container text-on-secondary-container'"
|
|
x-bind:aria-pressed="($store.theme.choice === '{{ $choice }}').toString()"
|
|
>{{ $label }}</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
@yield('content')
|
|
|
|
<x-toast />
|
|
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|