فهرست کشویی

<!-- User Dropdown -->
<div class="inline-flex relative" x-data="{ isOpen: false }">
    <!-- Dropdown trigger button -->
    <button type="button" class="inline-flex items-center gap-x-2.5 cursor-pointer outline-hidden"
        x-on:click="isOpen = !isOpen">
        <span class="line-clamp-1 font-semibold text-xs">ویدا فرهمند</span>

        <!-- User Avatar with Online Status Indicator -->
        <span class="inline-flex relative">
            <span class="inline-block sm:size-8 size-6 rounded-full overflow-hidden">
                <img src="https://blocks.spacedev.ir/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
            </span>
            <span class="absolute -end-0.5 -bottom-0.5 size-3 bg-emerald-500 border-2 border-surface rounded-full">
            </span>
        </span><!-- end User Avatar with Online Status Indicator -->

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
            class="size-4 transition-transform" x-bind:class="{ 'rotate-180': isOpen }">
            <path fill-rule="evenodd"
                d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
                clip-rule="evenodd" />
        </svg>
    </button><!-- end Dropdown trigger button -->

    <!-- Dropdown menu -->
    <div class="absolute end-1 top-full pt-1.5" x-cloak x-show="isOpen" x-on:click.outside="isOpen = false">
        <div
            class="w-52 bg-surface dark:bg-surface-2 rounded-lg shadow-md inset-shadow-xs inset-shadow-surface-content/10 space-y-2 p-3.5">
            <div class="flex flex-col gap-y-1">
                <span class="block truncate font-semibold text-xs">
                    شما وارد شده‌اید با
                </span>
                <div class="block truncate font-sans font-semibold text-2xs text-surface-2-content">
                    example@example.com
                </div>
            </div>

            <div class="flex flex-col gap-y-0.5">
                <!-- Action links -->
                <a href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-surface-2-content transition-colors hover:text-surface-content py-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
                        <path
                            d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
                    </svg>
                    <span class="font-medium text-xs">
                        مدیریت حساب
                    </span>
                </a>
                <a href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-surface-2-content transition-colors hover:text-surface-content py-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
                        <path fill-rule="evenodd"
                            d="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.46 3.593a.5.5 0 0 1 .639-.206l1.703.769c.433-.36.928-.65 1.466-.848l.186-1.858Zm-.177 7.567-.022-.037a2 2 0 0 1 3.466-1.997l.022.037a2 2 0 0 1-3.466 1.997Z"
                            clip-rule="evenodd" />
                    </svg>
                    <span class="font-medium text-xs">
                        تنظیمات
                    </span>
                </a>
                <a href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-surface-2-content transition-colors hover:text-surface-content py-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
                        <path fill-rule="evenodd"
                            d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
                            clip-rule="evenodd" />
                    </svg>
                    <span class="font-medium text-xs">
                        اعلانات
                    </span>
                </a><!-- end Action links -->

                <span class="block h-px bg-border my-1.5"></span>

                <!-- Logout button -->
                <button type="button"
                    class="flex items-center gap-x-1.5 w-full rounded-md cursor-pointer text-destructive py-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
                        <path fill-rule="evenodd"
                            d="M14 4.75A2.75 2.75 0 0 0 11.25 2h-3A2.75 2.75 0 0 0 5.5 4.75v.5a.75.75 0 0 0 1.5 0v-.5c0-.69.56-1.25 1.25-1.25h3c.69 0 1.25.56 1.25 1.25v6.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5A2.75 2.75 0 0 0 8.25 14h3A2.75 2.75 0 0 0 14 11.25v-6.5Zm-9.47.47a.75.75 0 0 0-1.06 0L1.22 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h7.19a.75.75 0 0 0 0-1.5H3.56l.97-.97a.75.75 0 0 0 0-1.06Z"
                            clip-rule="evenodd" />
                    </svg>
                    <span class="font-medium text-xs">
                        خروج از حساب
                    </span>
                </button><!-- end Logout button -->
            </div>
        </div>
    </div><!-- end Dropdown menu -->
</div><!-- end User Dropdown -->