mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-21 08:31:10 -05:00
Implement HomeController, update home route, and enhance menu components with close functionality
This commit is contained in:
pacnpal
@@ -1,39 +1,96 @@
|
||||
<div>
|
||||
<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="toggle"
|
||||
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
|
||||
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"
|
||||
>
|
||||
<i class="text-2xl fas {{ $isOpen ? 'fa-times' : 'fa-bars' }}"></i>
|
||||
<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: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' }}"
|
||||
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) -->
|
||||
<form action="{{ route('search') }}" method="get" class="mb-4">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search parks and rides..."
|
||||
class="form-input"
|
||||
/>
|
||||
</form>
|
||||
<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="space-y-2">
|
||||
<a href="{{ route('parks.index') }}" class="block nav-link">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<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') }}" class="block nav-link">
|
||||
<i class="fas fa-rocket"></i>
|
||||
<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>
|
||||
Reference in New Issue
Block a user