mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 09:31:11 -05:00
Implement HomeController, update home route, and enhance menu components with close functionality
This commit is contained in:
pacnpal
38
resources/views/home.blade.php
Normal file
38
resources/views/home.blade.php
Normal file
@@ -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>
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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', () => {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user