Implement HomeController, update home route, and enhance menu components with close functionality

This commit is contained in:
pacnpal
2025-02-25 16:49:45 -05:00
parent b4462ba89e
commit 8951e59f49
14 changed files with 511 additions and 233 deletions

View File

@@ -64,66 +64,73 @@
@stack('styles')
</head>
<body
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-blue-950 dark:to-purple-950 dark:text-white"
>
<!-- Header -->
<header
class="sticky top-0 z-40 border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
>
<nav class="container mx-auto nav-container">
<div class="flex items-center justify-between">
<header class="sticky top-0 z-40 bg-gray-900 shadow-lg">
<nav class="container mx-auto">
<div class="flex items-center justify-between h-20 px-6">
<!-- Logo -->
<div class="flex items-center">
<a
href="{{ route('home') }}"
class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
>
ThrillWiki
<a href="{{ route('home') }}" class="text-2xl font-bold text-white transition-transform hover:scale-105">
<span class="text-gradient">ThrillWiki</span>
</a>
</div>
<!-- Navigation Links (Always Visible) -->
<div class="flex items-center space-x-2 sm:space-x-4">
<div class="hidden lg:flex items-center space-x-8">
<a href="{{ route('parks.index') }}" class="nav-link">
<i class="fas fa-map-marker-alt"></i>
<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="nav-link">
<i class="fas fa-rocket"></i>
<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>
</div>
<!-- Search Bar -->
<div class="flex-1 hidden max-w-md mx-8 lg:flex">
<div class="flex-1 max-w-xl mx-8 hidden lg:block">
<form action="{{ route('search') }}" method="get" class="w-full">
<div class="relative">
<input
type="text"
name="q"
placeholder="Search parks and rides..."
class="form-input"
class="w-full px-4 py-2 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>
<!-- Right Side Menu -->
<div class="flex items-center space-x-2 sm:space-x-6">
<div class="flex items-center space-x-6">
<!-- Theme Toggle -->
<livewire:theme-toggle-component />
<!-- User Menu -->
@auth
@if(auth()->user()->can('access-moderation'))
<a href="{{ route('moderation.dashboard') }}" class="nav-link">
<i class="fas fa-shield-alt"></i>
<a href="{{ route('moderation.dashboard') }}" class="flex items-center gap-2 text-gray-300 hover:text-white">
<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
<livewire:user-menu-component />
@else
<!-- Generic Profile Icon for Unauthenticated Users -->
<livewire:auth-menu-component />
@endauth