thrillwiki_laravel/resources/views/livewire/mobile-menu-component.blade.php

<div>
    <button
        wire:click="toggle"
        class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
        aria-label="Toggle mobile menu"
        aria-expanded="{{ $isOpen }}"
    >
        <i class="text-2xl fas {{ $isOpen ? 'fa-times' : 'fa-bars' }}"></i>
    </button>

    <!-- Mobile Menu -->
    <div
        wire:model="isOpen"
        class="absolute left-0 right-0 w-full p-4 mt-2 space-y-4 bg-white border-b dark:bg-gray-800 dark:border-gray-700"
        style="display: {{ $isOpen ? 'block' : 'none' }}"
    >
        <!-- Search (Mobile) -->
        <form action="{{ route('search') }}" method="get" class="mb-4">
            <input
                type="text"
                name="q"
                placeholder="Search parks and rides..."
                class="form-input"
            />
        </form>

        <!-- Mobile Navigation Links -->
        <nav class="space-y-2">
            <a href="{{ route('parks.index') }}" class="block nav-link">
                <i class="fas fa-map-marker-alt"></i>
                <span>Parks</span>
            </a>
            <a href="{{ route('rides.index') }}" class="block nav-link">
                <i class="fas fa-rocket"></i>
                <span>Rides</span>
            </a>
        </nav>
    </div>
</div>