cms-gov/app/Views/admin/partials/navbar.php

<header
    x-data="{menuToggle: false}"
    class="sticky top-0 z-99999 flex w-full border-gray-200 bg-white lg:border-b dark:border-gray-800 dark:bg-gray-900"
>
    <div class="flex grow flex-col items-center justify-between lg:flex-row lg:px-6">
        <div class="flex w-full items-center justify-between gap-2 border-b border-gray-200 px-3 py-3 sm:gap-4 lg:justify-normal lg:border-b-0 lg:px-0 lg:py-4 dark:border-gray-800">
            <!-- Hamburger Toggle BTN -->
            <button
                :class="sidebarToggle ? 'lg:bg-transparent dark:lg:bg-transparent bg-gray-100 dark:bg-gray-800' : ''"
                class="z-99999 flex h-10 w-10 items-center justify-center rounded-lg border-gray-200 text-gray-500 lg:h-11 lg:w-11 lg:border dark:border-gray-800 dark:text-gray-400"
                @click.stop="sidebarToggle = !sidebarToggle"
            >
                <i class="fe fe-menu hidden lg:block text-base"></i>
                <i :class="sidebarToggle ? 'hidden' : 'block lg:hidden'" class="fe fe-menu block lg:hidden text-lg"></i>
                <i :class="sidebarToggle ? 'block lg:hidden' : 'hidden'" class="fe fe-x block lg:hidden text-lg"></i>
            </button>
            <!-- Hamburger Toggle BTN -->

            <!-- Page Title -->
            <div class="lg:hidden">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white"><?= esc($title ?? 'Dashboard') ?></h2>
            </div>

            <!-- Search -->
            <div class="hidden lg:block">
                <form>
                    <div class="relative">
                        <span class="absolute top-1/2 left-4 -translate-y-1/2">
                            <i class="fe fe-search text-gray-500 dark:text-gray-400 text-lg"></i>
                        </span>
                        <input
                            type="text"
                            placeholder="Search..."
                            class="h-11 w-full rounded-lg border border-gray-200 bg-transparent py-2.5 pr-4 pl-12 text-sm text-gray-800 placeholder:text-gray-400 focus:border-primary-300 focus:ring-3 focus:ring-primary-500/10 focus:outline-none xl:w-[430px] dark:border-gray-800 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                        />
                    </div>
                </form>
            </div>
        </div>

        <div :class="menuToggle ? 'flex' : 'hidden'" class="shadow-md w-full items-center justify-between gap-4 px-5 py-4 lg:flex lg:justify-end lg:px-0 lg:shadow-none">
            <div class="flex items-center gap-2">
                <!-- Dark Mode Toggler -->
                <button
                    @click="$store.darkMode.toggle()"
                    class="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
                >
                    <i class="fe fe-sun hidden dark:block text-lg"></i>
                    <i class="fe fe-moon dark:hidden text-lg"></i>
                </button>
                <!-- Dark Mode Toggler -->

                <!-- Notification Menu Area -->
                <div class="relative" x-data="{ dropdownOpen: false }" @click.outside="dropdownOpen = false">
                    <button
                        class="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
                        @click.prevent="dropdownOpen = !dropdownOpen"
                    >
                        <i class="fe fe-bell text-lg"></i>
                    </button>
                </div>
                <!-- Notification Menu Area -->
            </div>

            <!-- User Area -->
            <div class="relative" x-data="{ dropdownOpen: false }" @click.outside="dropdownOpen = false">
                <a
                    class="flex items-center text-gray-700 dark:text-gray-400"
                    href="#"
                    @click.prevent="dropdownOpen = !dropdownOpen"
                >
                    <span class="mr-3 h-11 w-11 overflow-hidden rounded-full">
                        <img src="<?= base_url('assets/images/user/owner.jpg') ?>" alt="User" class="h-full w-full object-cover" />
                    </span>
                    <span class="text-sm mr-1 block font-medium dark:text-white"><?= esc(session()->get('username') ?? 'User') ?></span>
                    <i :class="dropdownOpen && 'rotate-180'" class="fe fe-chevron-down text-gray-500 dark:text-gray-400 text-sm transition-transform"></i>
                </a>

                <!-- Dropdown Start -->
                <div
                    x-show="dropdownOpen"
                    class="shadow-lg absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900"
                >
                    <div>
                        <span class="text-sm block font-medium text-gray-700 dark:text-gray-400">
                            <?= esc(session()->get('username') ?? 'User') ?>
                        </span>
                        <span class="text-xs mt-0.5 block text-gray-500 dark:text-gray-400">
                            <?= esc(session()->get('email') ?? 'user@example.com') ?>
                        </span>
                    </div>

                    <ul class="flex flex-col gap-1 border-b border-gray-200 pt-4 pb-3 dark:border-gray-800">
                        <li>
                            <a href="<?= base_url('admin/profile') ?>" class="group text-sm flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5">
                                <i class="fe fe-user text-gray-500 group-hover:text-gray-700 dark:text-gray-400"></i>
                                Edit profile
                            </a>
                        </li>
                    </ul>
                    <a href="<?= base_url('auth/logout') ?>" class="group text-sm mt-3 flex items-center gap-3 rounded-lg px-3 py-2 font-medium text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-white/5">
                        <i class="fe fe-log-out text-red-500 group-hover:text-red-700 dark:text-red-400"></i>
                        Sign out
                    </a>
                </div>
                <!-- Dropdown End -->
            </div>
            <!-- User Area -->
        </div>
    </div>
</header>