livewire-material/resources/views/showcase/sections/layout.blade.php

{{-- M3's window size classes, live: the one this window is in, what each one changes, and the
     variants that key on them. The five cards light up through the variants themselves, so the
     page proves the compiled breakpoints rather than describing them. --}}

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

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        Widths are M3's window size classes and nothing else: compact below 600px, then <code>medium:</code> 600,
        <code>expanded:</code> 840, <code>large:</code> 1200 and <code>extra-large:</code> 1600, with
        <code>max-medium:</code> and friends for "below". Tailwind's <code>sm:</code>…<code>2xl:</code> compile to
        nothing. Scripts read the same numbers from <code>resources/js/breakpoints.js</code>.
    </p>

    <div
        x-data="{ width: window.innerWidth }"
        x-on:resize.window="width = window.innerWidth"
        class="flex flex-wrap items-baseline gap-x-4 gap-y-1 rounded-corner-lg bg-surface-container-low p-6"
        data-test="window-class"
    >
        <span class="type-label-lg text-on-surface-variant">This window</span>
        <span class="type-emphasized-headline-sm tabular-nums" x-text="width + 'px'"></span>
        <span class="type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
    </div>

    <div class="grid gap-3 medium:grid-cols-5">
        <div class="rounded-corner-md bg-surface-container p-4 max-medium:bg-primary-container max-medium:text-on-primary-container">
            <p class="type-title-sm">Compact</p>
            <p class="type-body-sm">below 600px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 medium:max-expanded:bg-primary-container medium:max-expanded:text-on-primary-container">
            <p class="type-title-sm">Medium</p>
            <p class="type-body-sm">600–839px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 expanded:max-large:bg-primary-container expanded:max-large:text-on-primary-container">
            <p class="type-title-sm">Expanded</p>
            <p class="type-body-sm">840–1199px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 large:max-extra-large:bg-primary-container large:max-extra-large:text-on-primary-container">
            <p class="type-title-sm">Large</p>
            <p class="type-body-sm">1200–1599px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 extra-large:bg-primary-container extra-large:text-on-primary-container">
            <p class="type-title-sm">Extra-large</p>
            <p class="type-body-sm">from 1600px</p>
        </div>
    </div>

    <div class="overflow-x-auto rounded-corner-lg border border-structure">
        <table class="w-full type-body-md" data-table>
            <thead>
                <tr>
                    <th class="text-start">Class</th>
                    <th class="text-start">Navigation</th>
                    <th class="text-start">Panes</th>
                    <th class="text-start">Dialogs and sheets</th>
                    <th class="text-start">Margin</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Compact</td>
                    <td>Navigation bar; the rail opens as a modal</td>
                    <td>One</td>
                    <td>Full-screen dialogs, bottom sheets for choices, date pickers as dialogs</td>
                    <td>16px</td>
                </tr>
                <tr>
                    <td>Medium</td>
                    <td>Collapsed navigation rail</td>
                    <td>One</td>
                    <td>Basic dialogs, docked search and pickers</td>
                    <td>24px</td>
                </tr>
                <tr>
                    <td>Expanded</td>
                    <td>Navigation rail, collapsible; starts collapsed</td>
                    <td>Two: list-detail (<code>&lt;x-drawer pane&gt;</code>) or a 360px supporting pane</td>
                    <td>Basic dialogs, side sheets</td>
                    <td>24px</td>
                </tr>
                <tr>
                    <td>Large</td>
                    <td>Navigation rail, expanded by default</td>
                    <td>Two; a fixed pane is 412px</td>
                    <td>Basic dialogs, side sheets</td>
                    <td>24px</td>
                </tr>
                <tr>
                    <td>Extra-large</td>
                    <td>Navigation rail, expanded</td>
                    <td>Two, a third as a side sheet</td>
                    <td>Basic dialogs, side sheets</td>
                    <td>24px</td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-app-shell&gt;</code> does all of this: resize this showcase and watch the bar, the rail and the
        content margin (<code>--material-margin</code>) change at 600, 840 and 1200px. A visitor who has chosen a rail
        width keeps it; until then the rail follows the class.
    </p>

    <x-livewire-material::stack gap="space200" data-test="layout-components">
        <h3 class="md-type-title-lg">The layout components</h3>

        <p class="md-type-body-md md-ink-variant">
            M3 describes a layout as a scaffold of bars and rails around panes, and names three canonical layouts. These are
            those words as components, each taking <code>as</code>, <code>hide-below</code> and <code>hide-from</code>, and
            only the spacing tokens for a gap or padding:
        </p>

        <x-livewire-material::stack as="ul" gap="space100" class="md-type-body-md">
            <li><code>&lt;x-pane&gt;</code> — a content region with M3's margins and its own app bar.</li>
            <li><code>&lt;x-list-detail&gt;</code> — a list and the detail of its selection: one pane below 840px, two from it.</li>
            <li><code>&lt;x-surface&gt;</code> — a tonal region: a surface role, padding, a corner and an outline.</li>
            <li><code>&lt;x-stack&gt;</code>, <code>&lt;x-row&gt;</code> and <code>&lt;x-grid&gt;</code> — arrangement inside a pane.</li>
        </x-livewire-material::stack>
    </x-livewire-material::stack>
</section>