@php
    $examples = [
        'Navigation bar' => <<<'BLADE'
            <div class="w-full space-y-6">
                <div class="max-w-[25rem] space-y-2">
                    <p class="type-label-lg text-on-surface-variant">Compact: icon over label</p>
                    <div class="flex h-56 flex-col overflow-hidden rounded-corner-lg border border-outline-variant bg-surface">
                        <div class="flex-1 p-4 type-body-md text-on-surface-variant">The page</div>
                        <x-navigation-bar>
                            <x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
                            <x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
                            <x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
                            <x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate :badge="true" badge-label="Needs attention" />
                        </x-navigation-bar>
                    </div>
                </div>

                <div class="max-w-[50rem] space-y-2">
                    <p class="type-label-lg text-on-surface-variant">From 600px wide: icon beside label, centred</p>
                    <div class="overflow-x-auto rounded-corner-lg border border-outline-variant">
                        <div class="flex h-56 min-w-[37.5rem] flex-col bg-surface">
                            <div class="flex-1 p-4 type-body-md text-on-surface-variant">The page</div>
                            <x-navigation-bar>
                                <x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
                                <x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
                                <x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
                                <x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate />
                            </x-navigation-bar>
                        </div>
                    </div>
                </div>
            </div>
            BLADE,
        'Collapsed and expanded rails' => <<<'BLADE'
            <div class="flex w-full flex-wrap items-start gap-6">
                <div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
                    <x-navigation-rail mode="collapsed" label="Collapsed example">
                        <x-slot:header>
                            <x-fab icon="edit" tooltip-right="Compose" />
                        </x-slot:header>

                        <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                        <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-section label="Labels">
                            <x-navigation-rail-item label="Travel" icon="flight" link="#navigation" no-wire-navigate :badge="true" badge-label="New" />
                            <x-navigation-rail-item label="Receipts" icon="receipt_long" link="#navigation" no-wire-navigate />
                        </x-navigation-rail-section>

                        <x-slot:footer>
                            <x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
                        </x-slot:footer>
                    </x-navigation-rail>
                </div>

                <div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
                    <x-navigation-rail mode="expanded" label="Expanded example">
                        <x-slot:header>
                            <x-fab label="Compose" icon="edit" />
                        </x-slot:header>

                        <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                        <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-section label="Labels">
                            <x-navigation-rail-item label="Travel" icon="flight" link="#navigation" no-wire-navigate :badge="true" badge-label="New" />
                            <x-navigation-rail-item label="Receipts" icon="receipt_long" link="#navigation" no-wire-navigate />
                        </x-navigation-rail-section>

                        <x-slot:footer>
                            <x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
                        </x-slot:footer>
                    </x-navigation-rail>
                </div>
            </div>
            BLADE,
        'Collapsible rail' => <<<'BLADE'
            <div class="flex h-[30rem] w-full overflow-hidden rounded-corner-lg border border-outline-variant">
                <x-navigation-rail label="Collapsible example">
                    <x-slot:brand>
                        <span class="block truncate type-title-lg">Mail</span>
                    </x-slot:brand>

                    <x-slot:header>
                        <span class="rail-collapsed:hidden"><x-fab label="Compose" icon="edit" /></span>
                        <span class="hidden rail-collapsed:inline-flex"><x-fab icon="edit" tooltip-right="Compose" /></span>
                    </x-slot:header>

                    <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                    <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                    <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
                </x-navigation-rail>

                <div class="min-w-0 flex-1 bg-surface-container-low p-6 type-body-md text-on-surface-variant">
                    The menu button collapses and expands the rail. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <code>&lt;x-app-shell&gt;</code>'s from <code>lg</code> too.
                </div>
            </div>
            BLADE,
    ];
@endphp

<section id="navigation" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">Navigation</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-navigation-bar&gt;</code> and <code>&lt;x-navigation-bar-item&gt;</code>, <code>&lt;x-navigation-rail&gt;</code>, <code>&lt;x-navigation-rail-item&gt;</code> and <code>&lt;x-navigation-rail-section&gt;</code>,
        and <code>&lt;x-app-shell&gt;</code>, which puts them together: a bar below <code>sm</code>, a collapsed rail that opens as a modal to <code>lg</code>, a collapsible rail from there.
        <a href="{{ route('livewire-material.shell') }}" class="link text-primary">Open the app shell</a> and change the window's width.
    </p>

    @foreach ($examples as $title => $code)
        <x-showcase::example :$title :$code />
    @endforeach
</section>