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

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>