Update navbar profile

resources/views/layouts/navigation.blade.php

@@ -6,8 +6,8 @@
 
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-20"> 
-            {{-- Logo Section --}}
             <div class="flex">
+                {{-- Logo Section --}}
                 <div class="shrink-0 flex items-center">
                     <a href="{{ route('dashboard') }}" class="flex items-center gap-4 group">
                         <div class="flex items-center justify-center transition-transform duration-300 group-hover:scale-105">
@@ -27,6 +27,43 @@
                 </div>
             </div>
 
+            {{-- MENU DESKTOP (USER PROFILE DROPDOWN) --}}
+            <div class="hidden lg:flex lg:items-center lg:ms-6">
+                <x-dropdown align="right" width="48">
+                    <x-slot name="trigger">
+                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-black rounded-xl text-slate-500 bg-slate-50 hover:text-indigo-600 hover:bg-indigo-50 transition ease-in-out duration-150">
+                            <div class="w-8 h-8 bg-indigo-600 text-white rounded-lg flex items-center justify-center text-[10px] mr-2 shadow-sm">
+                                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
+                            </div>
+                            <div>{{ Auth::user()->name }}</div>
+                            <div class="ms-1">
+                                <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                        </button>
+                    </x-slot>
+
+                    <x-slot name="content">
+                        <div class="px-4 py-2 border-b border-slate-50">
+                            <p class="text-[10px] font-black text-slate-800 uppercase tracking-tighter">{{ Auth::user()->name }}</p>
+                            <p class="text-[8px] font-bold text-slate-400 truncate">{{ Auth::user()->email }}</p>
+                        </div>
+                        <x-dropdown-link :href="route('profile.edit')" class="text-[10px] font-bold uppercase tracking-widest">
+                            <i class="fas fa-user-circle mr-2 opacity-50"></i> {{ __('My Profile') }}
+                        </x-dropdown-link>
+                        <form method="POST" action="{{ route('logout') }}">
+                            @csrf
+                            <x-dropdown-link :href="route('logout')" class="text-[10px] font-black uppercase tracking-widest text-rose-500"
+                                    onclick="event.preventDefault(); this.closest('form').submit();">
+                                <i class="fas fa-sign-out-alt mr-2"></i> {{ __('Log Out') }}
+                            </x-dropdown-link>
+                        </form>
+                    </x-slot>
+                </x-dropdown>
+            </div>
+
+            {{-- Hamburger Button (Hanya Mobile) --}}
             <div class="-me-2 flex items-center lg:hidden">
                 <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-xl text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200 focus:outline-none">
                     <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
@@ -69,8 +106,6 @@
                     <x-responsive-nav-link :href="route('treatments.index')" :active="request()->routeIs('treatments.*')" class="text-[8.5px] font-bold py-2">
                         <i class="fas fa-notes-medical mr-2 w-4"></i> Rekam Medis
                     </x-responsive-nav-link>
-                    
-                    {{-- MEDICAL INSIGHT --}}
                     @if(Route::has('medical.dashboard'))
                     <x-responsive-nav-link :href="route('medical.dashboard')" :active="request()->routeIs('medical.dashboard')" class="text-[8.5px] font-bold py-2">
                         <i class="fas fa-microscope mr-2 w-4"></i> Medical Insight
@@ -130,21 +165,16 @@
                     <x-responsive-nav-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')" class="text-[8.5px] font-bold py-2">
                         <i class="fas fa-user-shield mr-2 w-4"></i> Management User
                     </x-responsive-nav-link>
-                    
-                    {{-- ROLE MANAGEMENT --}}
                     @if(Route::has('admin.roles.index'))
                     <x-responsive-nav-link :href="route('admin.roles.index')" :active="request()->routeIs('admin.roles.*')" class="text-[8.5px] font-bold py-2">
                         <i class="fas fa-key mr-2 w-4"></i> Role Management
                     </x-responsive-nav-link>
                     @endif
-
-                    {{-- LOG AUDIT --}}
                     @if(Route::has('admin.logs.index'))
                     <x-responsive-nav-link :href="route('admin.logs.index')" :active="request()->routeIs('admin.logs.*')" class="text-[8.5px] font-bold py-2 text-amber-600">
                         <i class="fas fa-history mr-2 w-4"></i> Log Audit
                     </x-responsive-nav-link>
                     @endif
-
                     <x-responsive-nav-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')" class="text-[8.5px] font-black py-2 text-rose-500 border-t border-slate-100">
                         <i class="fas fa-cogs mr-2 w-4"></i> Pengaturan Sistem
                     </x-responsive-nav-link>
@@ -153,23 +183,28 @@
             @endif
         </div>
 
-        {{-- USER INFO & LOGOUT --}}
+        {{-- USER INFO & LOGOUT (MOBILE) --}}
         <div class="pt-4 pb-8 border-t border-slate-100 bg-slate-50/50">
-            <div class="flex items-center px-6 gap-3 mb-4">
+            <div class="flex items-center px-6 gap-3 mb-4 text-left">
-                <div class="w-8 h-8 bg-indigo-600 text-white rounded-lg flex items-center justify-center font-black text-[10px]">
+                <div class="w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center font-black text-[12px] shadow-md">
                     {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                 </div>
                 <div class="overflow-hidden">
-                    <div class="font-black text-[9px] text-slate-800 uppercase leading-none">{{ Auth::user()->name }}</div>
+                    <div class="font-black text-[10px] text-slate-800 uppercase leading-none">{{ Auth::user()->name }}</div>
-                    <div class="font-bold text-[7px] text-slate-400 truncate mt-1">{{ Auth::user()->email }}</div>
+                    <div class="font-bold text-[8px] text-slate-400 truncate mt-1">{{ Auth::user()->email }}</div>
                 </div>
             </div>
-            <form method="POST" action="{{ route('logout') }}" class="px-4">
+            <div class="px-4 space-y-1">
-                @csrf
+                <x-responsive-nav-link :href="route('profile.edit')" class="rounded-xl font-bold text-[9px] uppercase tracking-widest py-2.5">
-                <button type="submit" class="w-full flex items-center justify-center gap-2 rounded-xl font-black text-[9px] uppercase tracking-widest text-rose-500 py-3 bg-white border border-rose-100 shadow-sm transition-all active:scale-95">
+                    <i class="fas fa-user-circle mr-3 w-4"></i> Edit Profile
-                    <i class="fas fa-sign-out-alt"></i> Keluar Aplikasi
+                </x-responsive-nav-link>
-                </button>
+                <form method="POST" action="{{ route('logout') }}">
-            </form>
+                    @csrf
+                    <button type="submit" class="w-full flex items-center justify-center gap-2 rounded-xl font-black text-[9px] uppercase tracking-widest text-rose-500 py-3 bg-white border border-rose-100 shadow-sm transition-all active:scale-95">
+                        <i class="fas fa-sign-out-alt"></i> Keluar Aplikasi
+                    </button>
+                </form>
+            </div>
         </div>
     </div>
 </nav>