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

<div class="relative">
    <!-- Backdrop -->
    <div
        class="fixed inset-0 bg-black/50 transition-opacity duration-300 lg:hidden {{ $isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none' }}"
        wire:click="close"
    ></div>

    <!-- Menu Button -->
    <button
        wire:click.stop="toggle"
        type="button"
        role="button"
        id="mobile-menu-button"
        class="p-2 text-gray-300 transition-transform hover:text-white hover:scale-110 lg:hidden"
        aria-label="Toggle mobile menu"
        aria-expanded="{{ $isOpen }}"
        aria-controls="mobile-menu"
    >
        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            @if($isOpen)
            <path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            @else
            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            @endif
        </svg>
    </button>

    <!-- Mobile Menu -->
    <div
        wire:key="mobile-menu"
        wire:click.away="close"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="mobile-menu-button"
        class="absolute left-0 right-0 z-50 w-full mt-2 bg-gray-900/95 backdrop-blur-lg border-t border-gray-800/50 shadow-xl transform transition-all duration-300 ease-out origin-top {{ $isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none' }}"
    >
        <!-- Search (Mobile) -->
        <div class="p-6 border-b border-gray-800/50">
            <form action="{{ route('search') }}" method="get">
                <div class="relative">
                    <input
                        type="text"
                        name="q"
                        placeholder="Search parks and rides..."
                        class="w-full px-4 py-3 text-gray-200 bg-gray-800/50 border border-gray-700/50 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary placeholder-gray-400"
                    />
                    <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
            </form>
        </div>

        <!-- Mobile Navigation Links -->
        <nav class="p-6 space-y-2">
            <a
                href="{{ route('parks.index') }}"
                role="menuitem"
                class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors rounded-lg hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
            >
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 9L12 16L22 9L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 9V20L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M22 9V20L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Parks</span>
            </a>
            <a
                href="{{ route('rides.index') }}"
                role="menuitem"
                class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors rounded-lg hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
            >
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Rides</span>
            </a>
            @auth
                @if(auth()->user()->can('access-moderation'))
                <a
                    href="{{ route('moderation.dashboard') }}"
                    role="menuitem"
                    class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors rounded-lg hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
                >
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span>Moderation</span>
                </a>
                @endif
            @endauth
        </nav>
    </div>
</div>