142 lines
6.1 KiB
PHP
142 lines
6.1 KiB
PHP
<header class="header">
|
|
<div class="toggle-btns">
|
|
<a id="toggle-sidebar" href="#"><i class="icon-list"></i></a>
|
|
<a id="pin-sidebar" href="#"><i class="icon-list"></i></a>
|
|
</div>
|
|
<div class="header-items">
|
|
<ul class="header-actions">
|
|
{{-- DROPDOWN NOTIFIKASI --}}
|
|
<li class="dropdown">
|
|
<a href="#" id="notifications" data-toggle="dropdown" aria-haspopup="true">
|
|
<i class="icon-bell"></i>
|
|
@if($notifCount > 0)
|
|
<span class="count-label">{{ $notifCount }}</span>
|
|
@endif
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right lrg" aria-labelledby="notifications">
|
|
<div class="dropdown-menu-header">
|
|
{{ $notifTitle }} ({{ $notifCount }})
|
|
</div>
|
|
<ul class="header-notifications">
|
|
@forelse($notifData as $notif)
|
|
<li>
|
|
<a href="{{ route('warga.index', ['search' => $notif->nik]) }}">
|
|
<div class="user-img online">
|
|
<img src="{{ asset('assetdashboard/img/profile.jpg') }}" class="header-avatar" alt="User">
|
|
</div>
|
|
<div class="details">
|
|
<div class="user-title">{{ $notif->nama }}</div>
|
|
<div class="noti-details">NIK: {{ $notif->nik }}</div>
|
|
<div class="noti-date">{{ $notif->updated_at->diffForHumans() }}</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
@empty
|
|
<li class="p-3 text-center text-muted small">Tidak ada tugas baru.</li>
|
|
@endforelse
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
{{-- DROPDOWN USER PROFILE --}}
|
|
<li class="dropdown">
|
|
<a href="#" id="userSettings" class="user-settings" data-toggle="dropdown" aria-haspopup="true">
|
|
<span class="user-name">{{ Auth::user()->username }}</span>
|
|
<span class="avatar shadow-sm">
|
|
<img src="{{ asset('assetdashboard/img/profile.jpg') }}" class="header-avatar" alt="avatar">
|
|
<span class="status {{ Auth::user()->role == 'admin' ? 'busy' : 'online' }}"></span>
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right custom-dropdown-profile" aria-labelledby="userSettings">
|
|
<div class="header-profile-actions">
|
|
<div class="header-user-profile text-center p-3">
|
|
<div class="header-user mb-3 d-flex justify-content-center">
|
|
<img src="{{ asset('assetdashboard/img/profile.jpg') }}" class="profile-img-dropdown shadow" alt="Profile">
|
|
</div>
|
|
<h5 class="mb-1 font-weight-bold text-dark">{{ Auth::user()->nama_lengkap }}</h5>
|
|
<p class="text-muted small text-uppercase mb-3">{{ Auth::user()->role }}</p>
|
|
</div>
|
|
|
|
<div class="dropdown-links border-top">
|
|
<a class="dropdown-item py-2" href="{{ route('account.profile') }}">
|
|
<i class="icon-user1 mr-2 text-success"></i> My Profile
|
|
</a>
|
|
@if(Auth::user()->role == 'admin')
|
|
<a class="dropdown-item py-2" href="{{ route('account.settings') }}">
|
|
<i class="icon-settings1 mr-2 text-info"></i> Account Settings
|
|
</a>
|
|
@endif
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item py-2 text-danger" href="{{ route('logout') }}"
|
|
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
|
<i class="icon-log-out1 mr-2"></i> Sign Out
|
|
</a>
|
|
</div>
|
|
|
|
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
|
|
@csrf
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
/* 1. MENGATASI FOTO GEPENG */
|
|
.header-avatar {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
object-fit: cover !important;
|
|
object-position: top;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.profile-img-dropdown {
|
|
width: 80px !important; /* Ukuran diperbesar sedikit agar lebih proporsional */
|
|
height: 80px !important;
|
|
object-fit: cover !important;
|
|
object-position: top;
|
|
border-radius: 50%;
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
/* 2. MELEBARKAN CARD DROPDOWN & MEMBERI JARAK */
|
|
.custom-dropdown-profile {
|
|
min-width: 260px !important; /* Card lebih lebar */
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
.header-user-profile h5 {
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
margin-top: 10px; /* Jarak antara foto dan nama */
|
|
}
|
|
|
|
.header-profile-actions a.dropdown-item {
|
|
padding: 12px 20px !important; /* Jarak antar menu lebih lega */
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #555;
|
|
}
|
|
|
|
.header-profile-actions a.dropdown-item:hover {
|
|
background-color: #f8f9fa;
|
|
color: #28a745;
|
|
}
|
|
|
|
/* Badge status pada avatar */
|
|
.user-settings .avatar .status {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 2px solid #fff;
|
|
right: -1px;
|
|
top: -1px;
|
|
}
|
|
</style>
|