antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restrict profile width and change logout modal to dropdown popup below avatar

Browse Source
This commit is contained in:
antv
2026-07-08 16:01:15 +07:00
parent 553d47ebd1
commit 439eec9015
1 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/header.blade.php
+60 -43
View File
@@ -18,62 +18,79 @@
<!-- User Profile Dropdown/Trigger --> <!-- User Profile Dropdown/Trigger -->
@if(Auth::check()) @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="relative">
<div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200"> <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">
@php <div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
$avatarUrl = Auth::user()->avatar ? Auth::user()->avatar : asset('images/avatar.png'); @php
$deptVal = Auth::user()->departments; $avatarUrl = Auth::user()->avatar ? Auth::user()->avatar : asset('images/avatar.png');
if (is_numeric($deptVal)) { $deptVal = Auth::user()->departments;
$idx = ((int)$deptVal) - 1; if (is_numeric($deptVal)) {
$deptName = config('constants.DEPARTMENTS')[$idx] ?? 'Team'; $idx = ((int)$deptVal) - 1;
} else { $deptName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
$deptName = $deptVal ?? 'Team'; } else {
} $deptName = $deptVal ?? 'Team';
@endphp }
<img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover"> @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>
<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> <!-- Dropdown Menu -->
<span class="text-[11px] text-gray-400 font-medium truncate max-w-[120px]" title="{{ $deptName }}">{{ $deptName }}</span> <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> </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>
@endif @endif
</div> </div>
</header> </header>
<!-- Logout Modal -->
@if(Auth::check()) @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> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const profileBtn = document.getElementById('header-profile'); const profileBtn = document.getElementById('header-profile');
const modal = document.getElementById('logout-modal'); const dropdown = document.getElementById('profile-dropdown');
const closeBtn = document.getElementById('close-logout-modal');
if (profileBtn && modal && closeBtn) { if (profileBtn && dropdown) {
profileBtn.addEventListener('click', function () { profileBtn.addEventListener('click', function (e) {
modal.classList.remove('hidden'); 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'); function closeDropdown() {
}); dropdown.classList.remove('scale-100', 'opacity-100');
modal.addEventListener('click', function (e) { dropdown.classList.add('scale-95', 'opacity-0');
if (e.target === modal) { setTimeout(() => {
modal.classList.add('hidden'); dropdown.classList.add('hidden');
}, 200);
}
document.addEventListener('click', function (e) {
if (!profileBtn.contains(e.target) && !dropdown.contains(e.target)) {
closeDropdown();
} }
}); });
} }