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

2025-12-20 03:51:10 -05:00 · 2025-02-25 16:49:45 -05:00
parent b4462ba89e
commit 8951e59f49
14 changed files with 511 additions and 233 deletions
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Park;
+use App\Models\ParkArea;
+
+class HomeController extends Controller
+{
+    public function index()
+    {
+        return view('home', [
+            'total_parks' => Park::count(),
+            'total_attractions' => ParkArea::count(),
+            'total_coasters' => ParkArea::where('type', 'roller_coaster')->count(),
+        ]);
+    }
+}
--- a/app/Livewire/AuthMenuComponent.php
+++ b/app/Livewire/AuthMenuComponent.php
@@ -13,6 +13,11 @@ class AuthMenuComponent extends Component
        $this->isOpen = !$this->isOpen;
    }

+    public function close()
+    {
+        $this->isOpen = false;
+    }
+
    public function render()
    {
        return view('livewire.auth-menu-component');
--- a/app/Livewire/MobileMenuComponent.php
+++ b/app/Livewire/MobileMenuComponent.php
@@ -13,6 +13,11 @@ class MobileMenuComponent extends Component
        $this->isOpen = !$this->isOpen;
    }

+    public function close()
+    {
+        $this->isOpen = false;
+    }
+
    public function render()
    {
        return view('livewire.mobile-menu-component');
--- a/app/Livewire/UserMenuComponent.php
+++ b/app/Livewire/UserMenuComponent.php
@@ -13,6 +13,11 @@ class UserMenuComponent extends Component
        $this->isOpen = !$this->isOpen;
    }

+    public function close()
+    {
+        $this->isOpen = false;
+    }
+
    public function render()
    {
        return view('livewire.user-menu-component');
--- a/database/migrations/2024_02_25_160100_add_type_to_park_areas_table.php
+++ b/database/migrations/2024_02_25_160100_add_type_to_park_areas_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('park_areas', function (Blueprint $table) {
+            $table->string('type')->default('attraction')->after('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('park_areas', function (Blueprint $table) {
+            $table->dropColumn('type');
+        });
+    }
+};
--- a/memory-bank/design/DesignMigration.md
+++ b/memory-bank/design/DesignMigration.md
@@ -1,129 +1,72 @@
-# Design Migration from Django to Laravel
+# Design Migration

-## Overview
-This document tracks the migration of design assets and templates from the original Django project to Laravel/Livewire implementation.
+## Header Design
+- Solid background with subtle transparency (bg-gray-900)
+- Increased height for better visibility (h-20)
+- Consistent spacing with px-6
+- Logo uses text gradient effect
+- Navigation links properly spaced with hover effects
+- Search bar integrated into header with proper styling

-## Static Assets Structure (Django)
-```
-static/
-├── css/
-│   ├── alerts.css
-│   ├── tailwind.css
-│   └── src/
-│       └── input.css
-├── images/
-│   ├── default-avatar.png
-│   ├── discord-icon.svg
-│   ├── favicon.png
-│   ├── google-icon.svg
-│   └── placeholders/
-│       ├── dark-ride.jpg
-│       ├── default-park.jpg 
-│       ├── default-ride.jpg
-│       ├── flat-ride.jpg
-│       ├── other-ride.jpg
-│       ├── roller-coaster.jpg
-│       ├── transport.jpg
-│       └── water-ride.jpg
-└── js/
-    ├── alerts.js
-    ├── alpine.min.js
-    ├── cdn.min.js
-    ├── location-autocomplete.js
-    ├── main.js
-    ├── park-map.js
-    ├── photo-gallery.js
-    └── search.js
-```
+## Menu Components

-## Primary Templates (Django)
-1. Base Templates
-   - base/base.html (Main layout template)
+### Common Features
+- Consistent backdrop blur effect
+- Semi-transparent backgrounds (bg-gray-900/95)
+- Subtle border effects (border-gray-800/50)
+- Smooth transitions and animations
+- Click-away behavior for all dropdowns
+- Proper z-indexing and positioning

-2. Feature-specific Templates
-   - accounts/ - User authentication and profile templates
-   - rides/ - Ride-related templates including listings and details
-   - parks/ - Park management templates
-   - companies/ - Company and manufacturer templates
-   - location/ - Location-related templates
-   - moderation/ - Content moderation templates
-   - media/ - Media management templates
+### User Menu
+- Larger profile picture (w-10 h-10)
+- Username display in dropdown
+- Sectioned menu items with borders
+- Consistent hover states
+- Clear visual hierarchy

-## Migration Plan
+### Mobile Menu
+- Full-width design
+- Proper spacing (p-6)
+- Enhanced search bar visibility
+- Smooth slide-in animation
+- Semi-transparent backdrop
+- Proper touch targets

-### Phase 1: Core Assets
-1. Static Assets Migration
-   - Copy and organize images in Laravel public directory
-   - Set up Tailwind CSS with proper configuration
-   - Migrate JavaScript assets to Laravel Vite setup
+### Auth Menu
+- Wider dropdown (w-56)
+- Clear login/register options
+- Consistent styling with other menus
+- Proper icon alignment

-### Phase 2: Component Structure
-1. Blade Components
-   - Convert Django templates to Blade components
-   - Implement Livewire components for interactive features
-   - Maintain consistent naming and structure
+### Theme Toggle
+- Improved button states
+- Proper focus indicators
+- Smooth transition effects
+- Clear light/dark mode icons

-### Phase 3: Layout & Design
-1. Base Layout
-   - Implement base.blade.php mirroring Django base template
-   - Set up layout components and partials
-   - Configure asset compilation and delivery
+## Responsive Design
+- Mobile-first approach
+- Proper breakpoints for navigation
+- Search bar visibility management
+- Menu adaptations for different screen sizes

-### Phase 4: Feature Templates
-1. Systematic migration of feature-specific templates:
-   - Auth & Profile views
-   - Park management views
-   - Ride management views
-   - Company management views
-   - Location components
-   - Moderation interface
-   - Media management views
+## Color System
+- Primary: Indigo-based gradient
+- Secondary: Gray scale for UI elements
+- Proper dark mode support
+- Consistent hover states
+- Semi-transparent overlays

-## Progress Tracking
+## Typography
+- Poppins font family
+- Clear hierarchy in text sizes
+- Proper line heights
+- Consistent font weights

- [x] Phase 1: Core Assets
-  - [x] Image assets migration
-  - [x] CSS setup and migration
-  - [x] JavaScript migration
-
- [x] Phase 2: Component Structure
-  - [x] Base components
-  - [x] Interactive components
-  - [x] Form components
-
- [x] Phase 3: Layout & Design
-  - [x] Base layout
-  - [x] Navigation
-  - [x] Common elements
-
- [x] Phase 4: Feature Templates
-  - [x] Auth templates
-  - [x] Park templates
-  - [x] Ride templates
-  - [x] Company templates
-  - [x] Location templates
-  - [x] Moderation templates
-  - [x] Media templates
-
-## Technical Decisions
-
-### CSS Strategy
- Using Tailwind CSS for styling consistency
- Maintaining utility-first approach from Django project
- Reusing existing Tailwind configuration where possible
-
-### JavaScript Strategy
- Leveraging Laravel's Vite for asset compilation
- Using Alpine.js for interactive features (matches Django implementation)
- Maintaining modular structure for JS components
-
-### Component Strategy
- Converting Django template partials to Blade components
- Using Livewire for dynamic features
- Maintaining consistent naming conventions
-
-## Next Steps
-1. Begin Phase 1 with static asset migration
-2. Set up base layout structure
-3. Implement core components
-4. Migrate feature-specific templates systematically
+## Accessibility
+- Proper focus states
+- Clear hover indicators
+- Sufficient color contrast
+- Proper ARIA labels
+- Keyboard navigation support
--- a/memory-bank/design/MenuComponents.md
+++ b/memory-bank/design/MenuComponents.md
@@ -0,0 +1,125 @@
+# Menu Components
+
+## Menu Behavior (Auth, User, and Mobile)
+
+All menu components implement consistent behavior for opening and closing using pure Livewire functionality:
+
+1. **Click Outside to Close**
+   - Uses `wire:click.away="close"` to close menu when clicking outside
+   - Calls the Livewire `close()` method directly
+
+2. **Toggle on Button Click**
+   - Uses `wire:click.stop="toggle"` on the trigger button/image
+   - Prevents event bubbling with wire:click.stop
+   - Toggle method directly flips the boolean state
+   - Simple and efficient state management
+
+3. **Menu Styling and Behavior**
+   - Uses z-index to ensure proper stacking
+   - Full-width menu items for better clickability
+   - Consistent hover and focus states
+   - Left-aligned text in buttons for consistency
+
+4. **Accessibility Features**
+   - Proper ARIA roles and attributes
+   - Focus management for keyboard navigation
+   - Clear visual feedback on focus
+   - Semantic HTML structure
+
+## Mobile Menu Specific Features
+
+1. **Backdrop Handling**
+   - Semi-transparent backdrop when menu is open
+   - Clicking backdrop closes menu
+   - Smooth opacity transitions
+
+2. **Responsive Behavior**
+   - Hidden on larger screens (lg:hidden)
+   - Full-width menu on mobile
+   - Smooth slide and fade transitions
+
+3. **Navigation Links**
+   - Full-width clickable areas
+   - Consistent spacing and padding
+   - Clear visual feedback on hover/focus
+   - Proper role attributes
+
+### Implementation Details
+
+All components share identical state management and methods:
+
+```php
+class MenuComponent extends Component
+{
+    public bool $isOpen = false;
+
+    public function toggle()
+    {
+        $this->isOpen = !$this->isOpen;
+    }
+
+    public function close()
+    {
+        $this->isOpen = false;
+    }
+}
+```
+
+Menu buttons include proper accessibility attributes:
+```blade
+<button
+    wire:click.stop="toggle"
+    type="button"
+    role="button"
+    aria-expanded="{{ $isOpen }}"
+    aria-label="Menu name"
+    id="menu-button"
+>
+    <!-- Button content -->
+</button>
+```
+
+Menu containers have proper ARIA roles:
+```blade
+<div
+    wire:key="menu-name"
+    wire:click.away="close"
+    role="menu"
+    aria-orientation="vertical"
+    aria-labelledby="menu-button"
+    class="... {{ $isOpen ? 'visible-state' : 'hidden-state' }}"
+>
+```
+
+Menu items have consistent styling and accessibility:
+```blade
+<a 
+    href="{{ route('item.route') }}" 
+    role="menuitem"
+    class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
+>
+    <i class="w-5 fas fa-icon"></i>
+    <span>Menu Item</span>
+</a>
+```
+
+Mobile menu backdrop:
+```blade
+<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>
+```
+
+This implementation:
+- Uses pure Livewire without Alpine.js dependencies
+- Maintains smooth transitions through CSS classes
+- Ensures consistent behavior across all menu components
+- Properly handles both click-outside and toggle functionality
+- Prevents event bubbling with wire:click.stop
+- Ensures proper re-rendering with wire:key
+- Uses simplified toggle logic for better reliability
+- Provides consistent styling and behavior for all menu items
+- Implements proper accessibility features throughout
+- Supports both mouse and keyboard interactions
+- Handles mobile-specific requirements elegantly
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -0,0 +1,38 @@
+<x-app-layout>
+    @section('title', 'ThrillWiki - Your Ultimate Theme Park Guide')
+    <div class="flex flex-col items-center justify-center min-h-[70vh] text-center">
+        <div class="w-full max-w-4xl px-4">
+            <h1 class="mb-8 text-6xl font-bold text-white">
+                Welcome to ThrillWiki
+            </h1>
+            
+            <p class="mb-16 text-2xl text-gray-300">
+                Your ultimate guide to theme parks and attractions worldwide
+            </p>
+
+            <div class="flex items-center justify-center gap-4">
+                <a href="{{ route('parks.index') }}" class="px-10 py-4 text-xl font-semibold text-white transition-transform bg-indigo-600 rounded-lg hover:scale-105">
+                    Explore Parks
+                </a>
+                <a href="{{ route('rides.index') }}" class="px-10 py-4 text-xl font-semibold text-white transition-transform border rounded-lg hover:scale-105 border-white/20">
+                    View Rides
+                </a>
+            </div>
+
+            <div class="grid grid-cols-1 gap-8 mt-20 sm:grid-cols-3">
+                <div class="p-8 text-center rounded-lg bg-gray-900/50">
+                    <div class="text-6xl font-bold text-white">{{ $total_parks ?? 0 }}</div>
+                    <div class="mt-3 text-xl text-gray-300">Theme Parks</div>
+                </div>
+                <div class="p-8 text-center rounded-lg bg-gray-900/50">
+                    <div class="text-6xl font-bold text-white">{{ $total_attractions ?? 0 }}</div>
+                    <div class="mt-3 text-xl text-gray-300">Attractions</div>
+                </div>
+                <div class="p-8 text-center rounded-lg bg-gray-900/50">
+                    <div class="text-6xl font-bold text-white">{{ $total_coasters ?? 0 }}</div>
+                    <div class="mt-3 text-xl text-gray-300">Roller Coasters</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -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

--- a/resources/views/livewire/auth-menu-component.blade.php
+++ b/resources/views/livewire/auth-menu-component.blade.php
@@ -1,34 +1,45 @@
 <div class="relative">
-    <div
-        wire:click="toggle"
-        class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
+    <button
+        wire:click.stop="toggle"
+        type="button"
+        role="button"
+        aria-expanded="{{ $isOpen }}"
+        aria-label="Authentication menu"
+        class="p-2 text-gray-300 transition-all duration-200 hover:text-white hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-lg"
    >
-        <i class="text-xl fas fa-user"></i>
-    </div>
+        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    </button>

    <!-- Auth Menu -->
    <div
-        wire:model="isOpen"
-        class="bg-white dropdown-menu dark:bg-gray-800"
-        style="display: {{ $isOpen ? 'block' : 'none' }}"
+        wire:key="auth-menu"
+        wire:click.away="close"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="auth-menu-button"
+        class="absolute right-0 z-50 w-56 mt-2 overflow-hidden transition-all duration-200 transform origin-top-right bg-gray-900/95 backdrop-blur-lg rounded-lg shadow-xl border border-gray-800/50 {{ $isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0 pointer-events-none' }}"
    >
-        <div
-            hx-get="{{ route('login') }}"
-            hx-target="body"
-            hx-swap="beforeend"
-            class="cursor-pointer menu-item"
+        <a
+            href="{{ route('login') }}"
+            role="menuitem"
+            class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
        >
-            <i class="w-5 fas fa-sign-in-alt"></i>
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
            <span>Login</span>
-        </div>
-        <div
-            hx-get="{{ route('register') }}"
-            hx-target="body"
-            hx-swap="beforeend"
-            class="cursor-pointer menu-item"
+        </a>
+        <a
+            href="{{ route('register') }}"
+            role="menuitem"
+            class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
        >
-            <i class="w-5 fas fa-user-plus"></i>
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8zM20 8v6M23 11h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
            <span>Register</span>
-        </div>
+        </a>
    </div>
 </div>
--- a/resources/views/livewire/mobile-menu-component.blade.php
+++ b/resources/views/livewire/mobile-menu-component.blade.php
@@ -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>
--- a/resources/views/livewire/theme-toggle-component.blade.php
+++ b/resources/views/livewire/theme-toggle-component.blade.php
@@ -1,19 +1,19 @@
-<label for="theme-toggle" class="cursor-pointer">
-    <input 
-        type="checkbox" 
-        id="theme-toggle" 
-        class="hidden" 
-        wire:model.live="isDark"
-        wire:change="toggleTheme"
-    >
-    <div
-        class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
-        role="button"
-        aria-label="Toggle dark mode"
-    >
-        <i class="text-xl fas {{ $isDark ? 'fa-sun' : 'fa-moon' }}"></i>
-    </div>
-</label>
+<button
+    wire:click="toggleTheme"
+    class="p-2 text-gray-300 transition-all duration-200 hover:text-white hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-lg"
+    aria-label="Toggle dark mode"
+    title="{{ $isDark ? 'Switch to light mode' : 'Switch to dark mode' }}"
+>
+    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        @if($isDark)
+        <!-- Sun icon -->
+        <path d="M12 3v1m0 16v1m-8-9H3m18 0h-1m-2.293-6.293l-.707-.707M6.707 17.707l-.707.707M17.707 17.707l.707.707M6.707 6.707l-.707-.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        @else
+        <!-- Moon icon -->
+        <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        @endif
+    </svg>
+</button>

 <script>
    document.addEventListener('livewire:init', () => {
--- a/resources/views/livewire/user-menu-component.blade.php
+++ b/resources/views/livewire/user-menu-component.blade.php
@@ -1,47 +1,85 @@
 <div class="relative">
    <!-- Profile Picture Button -->
    @if(auth()->user()->profile?->avatar)
-    <img
-        wire:click="toggle"
-        src="{{ auth()->user()->profile->avatar }}"
-        alt="{{ auth()->user()->username }}"
-        class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
-    />
+    <button
+        wire:click.stop="toggle"
+        type="button"
+        role="button"
+        aria-expanded="{{ $isOpen }}"
+        aria-label="User menu"
+    >
+        <img
+            src="{{ auth()->user()->profile->avatar }}"
+            alt="{{ auth()->user()->username }}"
+            class="w-10 h-10 transition-all duration-200 rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
+        />
+    </button>
    @else
-    <div
-        wire:click="toggle"
-        class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
+    <button
+        wire:click.stop="toggle"
+        type="button"
+        role="button"
+        aria-expanded="{{ $isOpen }}"
+        aria-label="User menu"
+        class="flex items-center justify-center w-10 h-10 text-lg font-semibold text-white transition-all duration-200 rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
    >
        {{ ucfirst(auth()->user()->username[0]) }}
-    </div>
+    </button>
    @endif

    <!-- Dropdown Menu -->
    <div
-        wire:model="isOpen"
-        class="bg-white dropdown-menu dark:bg-gray-800"
-        style="display: {{ $isOpen ? 'block' : 'none' }}"
+        wire:key="user-menu"
+        wire:click.away="close"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="user-menu-button"
+        class="absolute right-0 z-50 w-56 mt-2 overflow-hidden transition-all duration-200 transform origin-top-right bg-gray-900/95 backdrop-blur-lg rounded-lg shadow-xl border border-gray-800/50 {{ $isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0 pointer-events-none' }}"
    >
-        <a href="{{ route('profile.show', auth()->user()->username) }}" class="menu-item">
-            <i class="w-5 fas fa-user"></i>
-            <span>Profile</span>
-        </a>
-        <a href="{{ route('settings') }}" class="menu-item">
-            <i class="w-5 fas fa-cog"></i>
-            <span>Settings</span>
-        </a>
-        @if(auth()->user()->can('access-admin'))
-        <a href="{{ route('admin.index') }}" class="menu-item">
-            <i class="w-5 fas fa-shield-alt"></i>
-            <span>Admin</span>
-        </a>
-        @endif
-        <form method="POST" action="{{ route('logout') }}">
-            @csrf
-            <button type="submit" class="w-full menu-item">
-                <i class="w-5 fas fa-sign-out-alt"></i>
-                <span>Logout</span>
-            </button>
-        </form>
+        <div class="px-4 py-3 border-b border-gray-800/50">
+            <p class="text-sm text-gray-400">Signed in as</p>
+            <p class="text-sm font-medium text-white truncate">{{ auth()->user()->username }}</p>
+        </div>
+        <div class="py-1">
+            <a
+                href="{{ route('profile.show', auth()->user()->username) }}"
+                class="flex items-center w-full gap-3 px-4 py-2 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
+                role="menuitem"
+            >
+                <i class="w-5 fas fa-user"></i>
+                <span>Profile</span>
+            </a>
+            <a
+                href="{{ route('settings') }}"
+                class="flex items-center w-full gap-3 px-4 py-2 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
+                role="menuitem"
+            >
+                <i class="w-5 fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+            @if(auth()->user()->can('access-admin'))
+            <a
+                href="{{ route('admin.index') }}"
+                class="flex items-center w-full gap-3 px-4 py-2 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
+                role="menuitem"
+            >
+                <i class="w-5 fas fa-shield-alt"></i>
+                <span>Admin</span>
+            </a>
+            @endif
+        </div>
+        <div class="py-1 border-t border-gray-800/50">
+            <form method="POST" action="{{ route('logout') }}">
+                @csrf
+                <button
+                    type="submit"
+                    class="flex items-center w-full gap-3 px-4 py-2 text-left text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
+                    role="menuitem"
+                >
+                    <i class="w-5 fas fa-sign-out-alt"></i>
+                    <span>Logout</span>
+                </button>
+            </form>
+        </div>
    </div>
 </div>
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,9 +3,7 @@
 use Illuminate\Support\Facades\Route;
 use App\Livewire\Counter;

-Route::get('/', function () {
-    return view('welcome');
-})->name('home');
+Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

 Route::get('/counter', Counter::class);