<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>