PAMSIMAS_Gumuksari/PAMSIMAS_Petugas/resources/views/components/navbar.blade.php

151 lines
5.5 KiB
PHP

<div class="navbar-header border-b border-neutral-200 dark:border-neutral-600">
<div class="flex items-center justify-between">
<!-- LEFT -->
<div class="col-auto">
<div class="flex flex-wrap items-center gap-[16px]">
<!-- SIDEBAR TOGGLE -->
<button type="button" class="sidebar-toggle">
<iconify-icon icon="heroicons:bars-3-solid" class="icon non-active"></iconify-icon>
<iconify-icon icon="iconoir:arrow-right" class="icon active"></iconify-icon>
</button>
<!-- MOBILE TOGGLE -->
<button type="button" class="sidebar-mobile-toggle d-flex !leading-[0]">
<iconify-icon icon="heroicons:bars-3-solid" class="icon !text-[30px]"></iconify-icon>
</button>
<!-- SEARCH -->
{{-- <form class="navbar-search">
<input type="text" name="search" placeholder="Search">
<iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
</form> --}}
</div>
</div>
<!-- RIGHT -->
<div class="col-auto">
<div class="flex flex-wrap items-center gap-3">
<!-- THEME TOGGLE -->
<button
type="button"
id="theme-toggle"
class="w-10 h-10 bg-neutral-200 dark:bg-neutral-700 dark:text-white rounded-full flex justify-center items-center"
>
<span id="theme-toggle-dark-icon" class="hidden">
<i class="ri-sun-line"></i>
</span>
<span id="theme-toggle-light-icon" class="hidden">
<i class="ri-moon-line"></i>
</span>
</button>
<!-- PROFILE BUTTON -->
<button
data-dropdown-toggle="dropdownProfile"
class="flex justify-center items-center rounded-full"
type="button"
>
<div class="w-10 h-10 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-sm">
{{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
</div>
</button>
<!-- PROFILE DROPDOWN -->
<div
id="dropdownProfile"
class="z-10 hidden bg-white dark:bg-neutral-700 rounded-lg shadow-lg dropdown-menu-sm p-3"
>
<!-- USER INFO -->
<div class="py-3 px-4 rounded-lg bg-primary-50 dark:bg-primary-600/25 mb-4 flex items-center justify-between gap-2">
<div>
<!-- NAMA USER -->
<h6 class="text-lg text-neutral-900 font-semibold mb-0">
{{ Auth::user()->name }}
</h6>
<!-- ROLE -->
<span class="text-neutral-500 capitalize">
{{ Auth::user()->role }}
</span>
</div>
<!-- CLOSE -->
<button type="button" class="hover:text-danger-600">
<iconify-icon
icon="radix-icons:cross-1"
class="icon text-xl"
></iconify-icon>
</button>
</div>
<!-- MENU -->
<div class="max-h-[400px] overflow-y-auto scroll-sm pe-2">
<ul class="flex flex-col">
<!-- PROFILE -->
<li>
<a
class="text-black px-0 py-2 hover:text-primary-600 flex items-center gap-4"
href="{{ route('profile.edit') }}"
>
<iconify-icon
icon="solar:user-linear"
class="icon text-xl"
></iconify-icon>
My Profile
</a>
</li>
<!-- INBOX -->
<!-- LOGOUT -->
<li>
<form
action="{{ route('logout') }}"
method="POST"
onsubmit="return confirm('Yakin ingin logout?')"
>
@csrf
<button
type="submit"
class="text-black w-full px-0 py-2 hover:text-danger-600 flex items-center gap-4"
>
<iconify-icon
icon="lucide:power"
class="icon text-xl"
></iconify-icon>
Log Out
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>