392 lines
9.9 KiB
PHP
392 lines
9.9 KiB
PHP
<header class="header fixed-top">
|
|
<div class="d-flex align-items-center justify-content-between w-100 px-3">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-list toggle-sidebar-btn"></i>
|
|
<a href="{{ route('admindash') }}" class="logo d-flex align-items-center ms-3">
|
|
<img src="{{ asset('logo/baru/HC.png') }}" alt="">
|
|
<span class="d-none d-lg-block">HeartChoice</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="header-right d-flex align-items-center">
|
|
<!-- Profile Nav Item -->
|
|
<div class="profile-nav-item dropdown">
|
|
<a class="nav-link d-flex align-items-center gap-2" href="#" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<div class="profile-avatar">
|
|
<img src="{{ asset('assetss/img/profile-default.png') }}"
|
|
alt="Profile"
|
|
class="rounded-circle"
|
|
width="40"
|
|
height="40"
|
|
onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}&background=2196f3&color=fff'">
|
|
</div>
|
|
<div class="profile-info d-none d-md-block">
|
|
<span class="profile-name text-truncate">{{ Auth::user()->name }}</span>
|
|
</div>
|
|
<i class="fas fa-chevron-down profile-arrow"></i>
|
|
</a>
|
|
|
|
<div class="dropdown-menu profile-dropdown-menu">
|
|
<!-- Profile Header -->
|
|
<div class="dropdown-header">
|
|
<div class="profile-header-content horizontal">
|
|
<div class="profile-avatar-lg">
|
|
<img src="{{ asset('assetss/img/profile-default.png') }}"
|
|
alt="Profile"
|
|
class="rounded-circle"
|
|
width="60"
|
|
height="60"
|
|
onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}&background=2196f3&color=fff&size=60'">
|
|
</div>
|
|
<div class="profile-details">
|
|
<h6 class="profile-name mb-1">{{ Auth::user()->name }}</h6>
|
|
<span class="profile-email text-muted">{{ Auth::user()->email }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<!-- Profile Actions -->
|
|
<div class="profile-actions">
|
|
<a class="dropdown-item d-flex align-items-center gap-2" href="{{ route('admin.profile') }}">
|
|
<i class="fas fa-user"></i>
|
|
<span>My Profile</span>
|
|
</a>
|
|
|
|
<form id="logoutForm" method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="button" class="dropdown-item d-flex align-items-center gap-2" onclick="confirmLogout()">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
/* Header Base Styles */
|
|
.header {
|
|
background: white;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.header-right {
|
|
margin-left: auto;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
text-decoration: none;
|
|
color: #2196f3;
|
|
}
|
|
|
|
.logo img {
|
|
max-height: 40px;
|
|
}
|
|
|
|
/* Profile Nav Item Styles */
|
|
.profile-nav-item {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.profile-nav-item .nav-link {
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #2196f3;
|
|
background: white;
|
|
}
|
|
|
|
.profile-nav-item .nav-link:hover {
|
|
background: rgba(33, 150, 243, 0.1);
|
|
}
|
|
|
|
.profile-avatar img {
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.profile-info {
|
|
line-height: 1.2;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.profile-name {
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
max-width: 150px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.profile-role {
|
|
font-size: 0.75rem;
|
|
color: #64b5f6;
|
|
}
|
|
|
|
.profile-arrow {
|
|
font-size: 0.75rem;
|
|
color: #2196f3;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.show .profile-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Dropdown Menu Styles */
|
|
.profile-dropdown-menu {
|
|
position: absolute !important;
|
|
top: 100% !important;
|
|
right: 0 !important;
|
|
left: auto !important;
|
|
min-width: 280px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
margin-top: 0.5rem;
|
|
animation: slideDown 0.3s ease;
|
|
transform-origin: top right;
|
|
background: white;
|
|
}
|
|
|
|
.dropdown-header {
|
|
background: linear-gradient(45deg, #2196f3, #64b5f6);
|
|
padding: 1rem;
|
|
border-radius: 1rem 1rem 0 0;
|
|
}
|
|
|
|
.profile-header-content.horizontal {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
color: white;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.profile-avatar-lg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.profile-avatar-lg img {
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.profile-details {
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.profile-details .profile-name {
|
|
color: #ffffff;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.25rem;
|
|
max-width: 180px;
|
|
}
|
|
|
|
.profile-details .profile-email {
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
color: white !important;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
margin: 0;
|
|
opacity: 0.1;
|
|
border-color: #e0e0e0;
|
|
}
|
|
|
|
/* Profile Actions Styles */
|
|
.profile-actions {
|
|
padding: 0.5rem;
|
|
background: white;
|
|
}
|
|
|
|
.profile-actions .dropdown-item {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
color: #2196f3;
|
|
background: white;
|
|
}
|
|
|
|
.profile-actions .dropdown-item:hover {
|
|
background: rgba(33, 150, 243, 0.1);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.profile-actions .dropdown-item i {
|
|
font-size: 1rem;
|
|
width: 1.5rem;
|
|
text-align: center;
|
|
color: #2196f3;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: 0 1rem;
|
|
background: white;
|
|
}
|
|
|
|
.profile-nav-item .nav-link {
|
|
padding: 0.375rem;
|
|
}
|
|
|
|
.profile-dropdown-menu {
|
|
min-width: 260px;
|
|
margin-top: 0.5rem;
|
|
background: white;
|
|
}
|
|
|
|
.profile-header-content.horizontal {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.profile-avatar-lg img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.profile-details .profile-name {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.profile-details .profile-email {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.profile-actions .dropdown-item {
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.9375rem;
|
|
}
|
|
}
|
|
|
|
/* Light Theme Override */
|
|
.header,
|
|
.profile-nav-item .nav-link,
|
|
.profile-dropdown-menu,
|
|
.profile-actions,
|
|
.profile-actions .dropdown-item {
|
|
background: white !important;
|
|
}
|
|
|
|
.profile-nav-item .nav-link:hover,
|
|
.profile-actions .dropdown-item:hover {
|
|
background: rgba(33, 150, 243, 0.1) !important;
|
|
}
|
|
|
|
.profile-arrow,
|
|
.profile-actions .dropdown-item,
|
|
.profile-actions .dropdown-item i {
|
|
color: #2196f3 !important;
|
|
}
|
|
|
|
.profile-role {
|
|
color: #64b5f6 !important;
|
|
}
|
|
|
|
/* Remove Dark Mode Support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.header,
|
|
.profile-nav-item .nav-link,
|
|
.profile-dropdown-menu,
|
|
.profile-actions,
|
|
.profile-actions .dropdown-item {
|
|
background: white !important;
|
|
}
|
|
|
|
.profile-name,
|
|
.profile-arrow,
|
|
.profile-actions .dropdown-item,
|
|
.profile-actions .dropdown-item i {
|
|
color: #2196f3 !important;
|
|
}
|
|
|
|
.profile-role {
|
|
color: #64b5f6 !important;
|
|
}
|
|
|
|
.profile-nav-item .nav-link:hover,
|
|
.profile-actions .dropdown-item:hover {
|
|
background: rgba(33, 150, 243, 0.1) !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function confirmLogout() {
|
|
Swal.fire({
|
|
title: 'Ready to Leave?',
|
|
text: "You will be logged out of your session",
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#2196f3',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes, logout',
|
|
cancelButtonText: 'Cancel',
|
|
reverseButtons: true,
|
|
customClass: {
|
|
confirmButton: 'btn btn-primary',
|
|
cancelButton: 'btn btn-danger'
|
|
}
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById('logoutForm').submit();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add active states for dropdown
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const profileDropdown = document.querySelector('.profile-nav-item .nav-link');
|
|
const dropdownMenu = document.querySelector('.profile-dropdown-menu');
|
|
|
|
if (profileDropdown && dropdownMenu) {
|
|
profileDropdown.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
this.classList.toggle('active');
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (!profileDropdown.contains(e.target) && !dropdownMenu.contains(e.target)) {
|
|
profileDropdown.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|