@props([
    'open' => false,
])

<div
    x-data="{ open: @js($open) }"
    x-on:toggle-mobile-nav.window="open = !open"
    x-on:close-mobile-nav.window="open = false"
    {{ $attributes->merge(['class' => 'lg:hidden']) }}
>
    <button
        type="button"
        class="inline-flex items-center justify-center rounded-[var(--radius-md)] p-2 text-[var(--color-text)] hover:bg-[var(--color-bg)]"
        @click="open = !open"
        :aria-expanded="open"
        aria-label="Toggle navigation"
    >
        <span x-show="!open"><x-ui.icon name="menu" class="h-6 w-6" /></span>
        <span x-show="open" x-cloak><x-ui.icon name="x" class="h-6 w-6" /></span>
    </button>

    <div
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 lg:hidden"
        role="dialog"
        aria-modal="true"
    >
        <div class="absolute inset-0 bg-black/40" @click="open = false" aria-hidden="true"></div>

        <div class="absolute inset-y-0 left-0 w-72 max-w-[85vw] overflow-y-auto bg-[var(--color-sidebar)] p-4 text-[var(--color-sidebar-text)] shadow-[var(--shadow-lg)]">
            <div class="mb-4 flex items-center justify-between">
                <span class="text-sm font-semibold">Menu</span>
                <button type="button" class="rounded p-1" @click="open = false" aria-label="Close">
                    <x-ui.icon name="x" class="h-5 w-5" />
                </button>
            </div>

            <nav class="space-y-1" aria-label="Mobile">
                {{ $slot }}
            </nav>
        </div>
    </div>
</div>