From 439eec9015e137530e549a42aa48da9e70416912 Mon Sep 17 00:00:00 2001
From: antv <antv@runsystem.net>
Date: Wed, 8 Jul 2026 16:01:15 +0700
Subject: [PATCH] fix: restrict profile width and change logout modal to
 dropdown popup below avatar

---
 resources/views/components/header.blade.php | 103 ++++++++++++--------
 1 file changed, 60 insertions(+), 43 deletions(-)

diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
index 38a15af..b3dd290 100644
--- a/resources/views/components/header.blade.php
+++ b/resources/views/components/header.blade.php
@@ -18,62 +18,79 @@
 
         <!-- User Profile Dropdown/Trigger -->
         @if(Auth::check())
-            <div id="header-profile" class="flex items-center gap-3 cursor-pointer hover:bg-gray-50/80 p-1.5 rounded-xl transition-all border border-transparent hover:border-gray-100">
-                <div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
-                    @php
-                        $avatarUrl = Auth::user()->avatar ? Auth::user()->avatar : asset('images/avatar.png');
-                        $deptVal = Auth::user()->departments;
-                        if (is_numeric($deptVal)) {
-                            $idx = ((int)$deptVal) - 1;
-                            $deptName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
-                        } else {
-                            $deptName = $deptVal ?? 'Team';
-                        }
-                    @endphp
-                    <img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover">
+            <div class="relative">
+                <div id="header-profile" class="flex items-center gap-3 cursor-pointer hover:bg-gray-50/80 p-1.5 rounded-xl transition-all border border-transparent hover:border-gray-100">
+                    <div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
+                        @php
+                            $avatarUrl = Auth::user()->avatar ? Auth::user()->avatar : asset('images/avatar.png');
+                            $deptVal = Auth::user()->departments;
+                            if (is_numeric($deptVal)) {
+                                $idx = ((int)$deptVal) - 1;
+                                $deptName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
+                            } else {
+                                $deptName = $deptVal ?? 'Team';
+                            }
+                        @endphp
+                        <img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover">
+                    </div>
+                    <div class="hidden sm:flex flex-col leading-tight pr-1">
+                        <span class="text-[13px] font-bold text-[#1a2b49] block truncate max-w-[100px]" title="{{ Auth::user()->name }}">{{ Auth::user()->name }}</span>
+                        <span class="text-[11px] text-gray-400 font-medium block truncate max-w-[100px]" title="{{ $deptName }}">{{ $deptName }}</span>
+                    </div>
+                    <svg class="w-3.5 h-3.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+                    </svg>
                 </div>
-                <div class="hidden sm:flex flex-col leading-tight pr-1">
-                    <span class="text-[13px] font-bold text-[#1a2b49] truncate max-w-[120px]" title="{{ Auth::user()->name }}">{{ Auth::user()->name }}</span>
-                    <span class="text-[11px] text-gray-400 font-medium truncate max-w-[120px]" title="{{ $deptName }}">{{ $deptName }}</span>
+
+                <!-- Dropdown Menu -->
+                <div id="profile-dropdown" class="absolute right-0 mt-2 w-40 bg-white rounded-2xl shadow-xl border border-gray-100 py-1.5 hidden z-50 transform origin-top-right transition-all duration-200 scale-95 opacity-0">
+                    <form method="POST" action="{{ route('logout') }}" class="m-0">
+                        @csrf
+                        <button type="submit" class="w-full text-left px-4 py-2.5 text-[14px] font-semibold text-red-500 hover:bg-red-50 transition-colors flex items-center gap-2">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                            </svg>
+                            Đăng xuất
+                        </button>
+                    </form>
                 </div>
-                <svg class="w-3.5 h-3.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
             </div>
         @endif
     </div>
 </header>
 
-<!-- Logout Modal -->
 @if(Auth::check())
-    <div id="logout-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 hidden z-50">
-        <div class="bg-white rounded-2xl shadow-xl p-6 w-80 border border-gray-100">
-            <h2 class="text-[16px] font-bold text-[#1a2b49] mb-4 text-center">Bạn có chắc chắn muốn đăng xuất?</h2>
-            <div class="flex flex-col gap-2">
-                <form method="POST" action="{{ route('logout') }}">
-                    @csrf
-                    <button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white py-2.5 rounded-xl font-semibold text-[14px] transition-colors">Đăng xuất</button>
-                </form>
-                <button id="close-logout-modal" class="w-full text-gray-500 py-2.5 rounded-xl font-semibold text-[14px] hover:bg-gray-50 transition-colors">Hủy bỏ</button>
-            </div>
-        </div>
-    </div>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const profileBtn = document.getElementById('header-profile');
-            const modal = document.getElementById('logout-modal');
-            const closeBtn = document.getElementById('close-logout-modal');
+            const dropdown = document.getElementById('profile-dropdown');
 
-            if (profileBtn && modal && closeBtn) {
-                profileBtn.addEventListener('click', function () {
-                    modal.classList.remove('hidden');
+            if (profileBtn && dropdown) {
+                profileBtn.addEventListener('click', function (e) {
+                    e.stopPropagation();
+                    const isHidden = dropdown.classList.contains('hidden');
+                    if (isHidden) {
+                        dropdown.classList.remove('hidden');
+                        requestAnimationFrame(() => {
+                            dropdown.classList.remove('scale-95', 'opacity-0');
+                            dropdown.classList.add('scale-100', 'opacity-100');
+                        });
+                    } else {
+                        closeDropdown();
+                    }
                 });
-                closeBtn.addEventListener('click', function () {
-                    modal.classList.add('hidden');
-                });
-                modal.addEventListener('click', function (e) {
-                    if (e.target === modal) {
-                        modal.classList.add('hidden');
+
+                function closeDropdown() {
+                    dropdown.classList.remove('scale-100', 'opacity-100');
+                    dropdown.classList.add('scale-95', 'opacity-0');
+                    setTimeout(() => {
+                        dropdown.classList.add('hidden');
+                    }, 200);
+                }
+
+                document.addEventListener('click', function (e) {
+                    if (!profileBtn.contains(e.target) && !dropdown.contains(e.target)) {
+                        closeDropdown();
                     }
                 });
             }