livewire-material/resources/views/components/navigation-rail.blade.php

{{-- M3 Expressive's navigation rail: destinations down the start edge of a `medium` or wider
     window, collapsed (96px, icon over label) or expanded (icon beside label in a full-width
     pill). `mode`, props, slots and `$store.rail` are documented in SKILL.md.

     Anything else inside the rail queries `--md-navigation-rail-value` (SKILL.md has the pattern
     and an example); the rail's own two rules (resources/css/components/navigation-rail.css) are
     what publish it, so every other rule just queries it instead of copying the rail's own
     conditions. tests/Feature/Components/NavigationRailTest.php checks both halves.

     As the rail closes it keeps `data-md-closing` (`sheet` while the panel slides off the window,
     `scrim` while only the scrim fades) until the exit has run: Firefox cannot transition
     `display`, so this is what holds a closing rail on screen there (resources/js/navigation.js).

     Values from androidx Compose Material 3 (Apache-2.0), androidx-main
     27cf9a7d5788aa0f5f2d8b6699ce279560daf326: NavigationRailCollapsedTokens.kt,
     NavigationRailExpandedTokens.kt, NavigationRailBaselineItemTokens.kt and WideNavigationRail.kt
     — surface (surface-container and elevation 2 with a large inner corner when modal), 44px above
     the header and 40px under it, 4px between collapsed items. The styles are
     resources/css/components/navigation-rail.css; the behaviour resources/js/navigation.js. --}}

@props([
    'mode' => 'collapsible',
    'label' => null,
    'width' => '256px',
    'align' => 'top',
    'hideWhenCollapsed' => false,
    'menu' => null,
    'divider' => false,
    'fill' => true,
])

@php
    $mode = in_array($mode, ['collapsed', 'expanded', 'collapsible', 'modal', 'adaptive'], true) ? $mode : 'collapsible';
    $interactive = in_array($mode, ['collapsible', 'modal', 'adaptive'], true);
    // Only a rail that has a collapsed *and* an expanded state of its own can hide instead of
    // narrowing; a `modal` one is already over the page, and the two fixed modes mean what they say.
    $hideWhenCollapsed = $hideWhenCollapsed && in_array($mode, ['collapsible', 'adaptive'], true);
    $canOpen = in_array($mode, ['modal', 'adaptive'], true) || $hideWhenCollapsed;
    $menu ??= $interactive;
    $collapsedAtFirst = in_array($mode, ['collapsed', 'modal'], true);
    $narrow = $width === 'narrow';
    $width = $narrow ? '256px' : $width;
    $centred = $align === 'center';
@endphp

<div
    data-md-navigation-rail="{{ $mode }}"
    @if ($narrow) data-md-width="narrow" @endif
    @if ($centred) data-md-align="center" @endif
    @if ($hideWhenCollapsed) data-md-hide-when-collapsed @endif
    @if ($divider) data-md-divider @endif
    @unless ($fill) data-md-fill="false" @endunless
    @if ($interactive)
        x-data="materialNavigationRail('{{ $mode }}', {{ $hideWhenCollapsed ? 'true' : 'false' }})"
        x-bind:data-md-open="open"
        x-bind:data-md-closing="closing"
        x-effect="settle(open)"
    @endif
    {{ $attributes->merge(['style' => "--navigation-rail-width: {$width}"]) }}
>
    @if ($canOpen)
        <div data-md-navigation-rail-scrim aria-hidden="true" x-on:click="$store.rail.hide()"></div>
    @endif

    <nav
        data-md-navigation-rail-panel
        aria-label="{{ $label ?? __('Main') }}"
        @if ($canOpen)
            x-trap.inert.noscroll="open"
            x-layer="open"
            x-on:material-escape="$store.rail.hide()"
        @endif
    >
        @if ($menu || isset($brand) || isset($header))
            <div data-md-navigation-rail-header>
                @if ($menu || isset($brand))
                    <div data-md-navigation-rail-menu-row>
                        @if ($menu)
                            <button
                                type="button"
                                data-md-navigation-rail-menu
                                aria-label="{{ $collapsedAtFirst ? __('Expand navigation') : __('Collapse navigation') }}"
                                aria-expanded="{{ $collapsedAtFirst ? 'false' : 'true' }}"
                                x-on:click="menu()"
                                x-bind:aria-label="expanded ? @js(__('Collapse navigation')) : @js(__('Expand navigation'))"
                                x-bind:aria-expanded="expanded.toString()"
                                class="md-state-layer md-focus-ring md-touch-target"
                            >
                                <span data-md-navigation-rail-menu-collapse-icon><x-livewire-material::icon name="menu_open" /></span>
                                <span data-md-navigation-rail-menu-expand-icon><x-livewire-material::icon name="menu" /></span>
                            </button>
                        @endif

                        @isset($brand)
                            <div data-md-navigation-rail-brand>{{ $brand }}</div>
                        @endisset
                    </div>
                @endif

                @isset($header)
                    <div data-md-navigation-rail-fab-row {{ $header->attributes }}>{{ $header }}</div>
                @endisset
            </div>
        @endif

        <div data-md-navigation-rail-destinations>
            {{ $slot }}
        </div>

        @isset($footer)
            <div data-md-navigation-rail-footer {{ $footer->attributes }}>{{ $footer }}</div>
        @endisset
    </nav>
</div>