From 8ca6508f729d4eb4a90745cb5db074a065b876b9 Mon Sep 17 00:00:00 2001
From: antv <antv@runsystem.net>
Date: Wed, 8 Jul 2026 15:53:19 +0700
Subject: [PATCH] feat: move profile avatar from sidebar to top-right header
 next to send thankcard button

---
 resources/views/components/header.blade.php  | 63 ++++++++++++++++++++
 resources/views/components/sidebar.blade.php | 51 +---------------
 2 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
index b8a4b58..1236c49 100644
--- a/resources/views/components/header.blade.php
+++ b/resources/views/components/header.blade.php
@@ -15,5 +15,68 @@
             <span class="text-lg leading-none">+</span>
             Gửi Thanks card
         </a>
+
+        <!-- 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>
+                <div class="hidden md:flex flex-col leading-tight pr-1">
+                    <span class="text-[13px] font-bold text-[#1a2b49]">{{ Auth::user()->name }}</span>
+                    <span class="text-[11px] text-gray-400 font-medium truncate max-w-[120px]" 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>
+        @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');
+
+            if (profileBtn && modal && closeBtn) {
+                profileBtn.addEventListener('click', function () {
+                    modal.classList.remove('hidden');
+                });
+                closeBtn.addEventListener('click', function () {
+                    modal.classList.add('hidden');
+                });
+                modal.addEventListener('click', function (e) {
+                    if (e.target === modal) {
+                        modal.classList.add('hidden');
+                    }
+                });
+            }
+        });
+    </script>
+@endif
diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php
index c426852..3571483 100644
--- a/resources/views/components/sidebar.blade.php
+++ b/resources/views/components/sidebar.blade.php
@@ -44,56 +44,7 @@
     </nav>
 
     <!-- Illustration Box -->
-    <div class="hidden xl:flex justify-center items-center px-6 py-2 mt-auto">
+    <div class="hidden xl:flex justify-center items-center px-6 py-2 mt-auto mb-6">
         <img src="{{ asset('images/sidebar_illustration.png') }}" class="w-full max-w-[200px] h-auto object-contain mix-blend-multiply" alt="Illustration" />
     </div>
-
-    <!-- User Profile Section -->
-    <div id="sidebar-profile" class="p-5 border-t border-gray-100 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors shrink-0">
-        <div class="flex items-center gap-3">
-            <div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
-@php
-    $avatarUrl = Auth::check() && Auth::user()->avatar
-        ? Auth::user()->avatar
-        : asset('images/avatar.png');
-
-    $deptName = 'Product Team';
-    if (Auth::check()) {
-        $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="flex flex-col">
-                <span class="text-[14px] font-bold text-[#1e293b] leading-tight truncate max-w-[130px]">{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}</span>
-                <span class="text-[12px] text-gray-500 font-medium truncate max-w-[130px]" title="{{ $deptName }}">{{ $deptName }}</span>
-            </div>
-        </div>
-        <svg class="w-4 h-4 text-gray-600" 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>
-    <!-- Logout Modal -->
-    <div id="logout-modal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
-        <div class="bg-white rounded-lg shadow-lg p-6 w-80">
-            <h2 class="text-lg font-semibold mb-4">Bạn có muốn đăng xuất?</h2>
-            <form method="POST" action="{{ route('logout') }}">
-                @csrf
-                <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700">Logout</button>
-            </form>
-            <button id="close-logout-modal" class="mt-3 w-full text-gray-600 py-2 rounded-md hover:bg-gray-100">Cancel</button>
-        </div>
-    </div>
-    <script>
-        document.getElementById('sidebar-profile')?.addEventListener('click', function () {
-            document.getElementById('logout-modal').classList.remove('hidden');
-        });
-        document.getElementById('close-logout-modal')?.addEventListener('click', function () {
-            document.getElementById('logout-modal').classList.add('hidden');
-        });
-    </script>
 </aside>