<header class="top-header">
<nav
class="navbar navbar-expand align-items-center">
<!-- tombol buka/tutup sidebar -->
<div class="btn-toggle">
<a href="javascript:;" class="d-inline-flex">
<i class="material-icons-outlined">menu</i>
</a>
</div>
<div>
<p class="mb-0 fw-bold">DASHBOARD SGN</p>
</div>
<!-- kanan: hanya profil -->
<div class="ms-auto">
<ul class="navbar-nav align-items-center">
<li class="nav-item dropdown">
<p id="user-name" class="mb-0 font-bold">{{ app.user.name ?? app.user.username }}</p>
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<img src="{{ asset('frontend/img/user.png') }}" class="rounded-circle p-1 border" width="40" height="40" alt="">
</a>
<div class="dropdown-menu dropdown-user dropdown-menu-end shadow">
<a href="{{ path('kmj_user_profile') }}" class="dropdown-item d-flex align-items-center gap-2 py-2" href="javascript:;">
<i class="material-icons-outlined">person_outline</i>Profile
</a>
<a href="{{ path('kmj_user_change_password') }}" class="dropdown-item d-flex align-items-center gap-2 py-2" href="javascript:;">
<i class="material-icons-outlined">settings</i>Setting
</a>
<hr class="dropdown-divider">
<a href="{{ path('kmj_user_logout') }}" class="dropdown-item d-flex align-items-center gap-2 py-2" href="javascript:;">
<i class="material-icons-outlined">power_settings_new</i>Logout
</a>
</div>
</li>
</ul>
</div>
</nav>
</header>