mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 08:31:09 -05:00
96 lines
5.0 KiB
PHP
96 lines
5.0 KiB
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> |