antv
83 lines
4.4 KiB
PHP
83 lines
4.4 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 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] 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>
|
|
</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
|