antv
94 lines
5.0 KiB
PHP
94 lines
5.0 KiB
PHP
<header class="bg-transparent sticky top-0 z-30 pt-6 pb-2 px-8 flex justify-between items-center w-full">
|
|
<div class="flex items-center gap-4">
|
|
<!-- Menu hamburger -->
|
|
<button id="sidebar-hamburger" class="p-2 text-gray-500 hover:text-gray-800 rounded-md focus:outline-none transition-colors">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
<!-- Primary Action Button -->
|
|
<a href="{{ route('user.send') }}" class="hidden sm:flex items-center gap-2 px-5 py-2.5 bg-[#3462f7] hover:bg-blue-700 text-white text-[14px] font-bold rounded-xl shadow-md transition-all shadow-blue-500/20">
|
|
<span class="text-lg leading-none">+</span>
|
|
Gửi Thanks card
|
|
</a>
|
|
|
|
<!-- User Profile Dropdown/Trigger -->
|
|
@if(Auth::check())
|
|
<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');
|
|
$deptName = Auth::user()->department_name ?? 'Team';
|
|
@endphp
|
|
<img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover" onerror="this.onerror=null; this.src='{{ asset('images/avatar.png') }}';">
|
|
</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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</header>
|
|
|
|
@if(Auth::check())
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const profileBtn = document.getElementById('header-profile');
|
|
const dropdown = document.getElementById('profile-dropdown');
|
|
|
|
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();
|
|
}
|
|
});
|
|
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endif
|