TIF_NGANJUK_E41220778/resources/views/layouts/navigation.blade.php

123 lines
6.3 KiB
PHP

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container-fluid">
{{-- Tombol Sidebar Toggle --}}
<button class="btn btn-light me-2" type="button" id="sidebarToggle">
<i class="bi bi-list fs-5"></i>
</button>
{{-- Judul Halaman --}}
<a class="navbar-brand fw-bold me-auto" href="#">
@yield('page-title', 'Perpus')
</a>
{{-- Container Ikon Kanan --}}
<div class="d-flex align-items-center ms-auto gap-3 me-3">
{{-- DROPDOWN Notifikasi --}}
<div class="dropdown notification-dropdown">
<a href="#" class="nav-link" id="notificationDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-bell fs-5 position-relative">
@if ($unreadNotificationsCount > 0)
<span
class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
@endif
</i>
</a>
<div class="dropdown-menu dropdown-menu-end border-0 shadow-lg" aria-labelledby="notificationDropdown">
<div class="px-3 py-2 d-flex justify-content-between align-items-center">
<h6 class="m-0 fw-bold text-dark">Notifikasi</h6>
@if ($unreadNotificationsCount > 0)
<span
class="badge bg-primary-subtle text-primary-emphasis rounded-pill">{{ $unreadNotificationsCount }}
Baru</span>
@endif
</div>
<hr class="my-1">
<div class="notification-wrapper overflow-auto px-2">
@forelse($notifikasi->take(5) as $item)
@php
$url = '#';
if (isset($item['type'])) {
if ($item['type'] === 'riwayat_peminjaman') {
$url = route('riwayat.offline');
} elseif ($item['type'] === 'rekomendasi' && isset($item['link_id'])) {
$url = route('rekomendasi.show', $item['link_id']);
} elseif ($item['type'] === 'katalog_kategori' && isset($item['link_id'])) {
$url = route('katalog.index', ['kategori' => $item['link_id']]);
}
}
@endphp
<a href="{{ $url }}"
class="notification-item my-1 rounded-pill dropdown-item @if (!$item['read']) unread @endif">
<div class="notification-icon bg-{{ $item['color'] }}-subtle">
<i class="bi {{ $item['icon'] }} text-{{ $item['color'] }}-emphasis"></i>
</div>
<div class="notification-content">
<p class="mb-0 text-truncate" style="max-width: 250px;">{{ $item['title'] }}</p>
<small>{{ $item['time'] }}</small>
</div>
@if (!$item['read'])
<div class="unread-dot"></div>
@endif
</a>
@empty
<div class="text-center py-5">
<i class="bi bi-bell-slash fs-2 text-muted"></i>
<p class="text-muted small mt-2 mb-0">Tidak ada notifikasi baru.</p>
</div>
@endforelse
</div>
@if (count($notifikasi) > 0)
<hr class="mt-1 mb-0">
<div class="text-center py-2">
<a href="#" class="fw-bold small dropdown-item justify-content-center"
data-bs-toggle="modal" data-bs-target="#semuaNotifikasiModal">
Lihat Semua
</a>
</div>
@endif
</div>
</div>
{{-- Dropdown Profile --}}
<div class="dropdown">
<a href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ Auth::user()->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode(Auth::user()->name) . '&background=random' }}"
alt="Avatar" class="profile-avatar">
</a>
<ul class="dropdown-menu dropdown-menu-end shadow-lg border-0" aria-labelledby="userDropdown">
<li>
<div class="px-3 py-2">
<h6 class="mb-0 fw-bold">{{ Auth::user()->name }}</h6>
<small class="text-muted">{{ Auth::user()->email }}</small>
</div>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="{{ route('profile.index') }}">
<i class="bi bi-person-circle"></i>
<span>{{ __('Profile') }}</span>
</a>
</li>
<li>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="dropdown-item text-danger">
<i class="bi bi-box-arrow-right"></i>
<span>{{ __('Log Out') }}</span>
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</nav>