<!-- Dropdown -->
<div class="inline-flex relative" x-data="{ isOpen: false }">
    <!-- Dropdown trigger button -->
    <button type="button"
        class="flex items-center justify-center gap-x-2 h-10 bg-background border border-transparent rounded-md cursor-pointer outline-hidden group/button transition-transform active:scale-95 hover:text-foreground px-3.5"
        x-bind:class="isOpen ? 'text-foreground' : 'text-muted-foreground'" x-on:click="isOpen = !isOpen">
        <span class="line-clamp-1 font-semibold text-xs">گزینه‌های بیشتر</span>

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sm:size-5 size-4 transition-transform"
            x-bind:class="{ 'rotate-180': isOpen }">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m6 9l6 6l6-6" />
        </svg>
    </button><!-- end Dropdown trigger button -->

    <!-- Dropdown menu -->
    <div class="absolute start-1 top-full pt-1.5" x-cloak x-show="isOpen" x-on:click.outside="isOpen = false">
        <div class="w-56 bg-background border rounded-lg space-y-2 p-1.5">
            <!-- Action links -->
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                    <path fill="currentColor"
                        d="M17.828 2a3 3 0 0 1 1.977.743l.145.136l1.171 1.17a3 3 0 0 1 .136 4.1l-.136.144L19.415 10l2.292 2.293a1 1 0 0 1 .083 1.32l-.083.094l-4 4a1 1 0 0 1-1.497-1.32l.083-.094L19.585 13l-1.586-1.585l-7.464 7.464a3.83 3.83 0 0 1-2.474 1.114l-.233.008c-.674 0-1.33-.178-1.905-.508l-1.216 1.214a1 1 0 0 1-1.497-1.32l.083-.094l1.214-1.216a3.83 3.83 0 0 1 .454-4.442l.16-.17L15.707 2.879a3 3 0 0 1 1.923-.873zm0 2a1 1 0 0 0-.608.206l-.099.087L15.414 6L18 8.585l1.707-1.706a1 1 0 0 0 .284-.576l.01-.131a1 1 0 0 0-.207-.609l-.087-.099l-1.171-1.171A1 1 0 0 0 17.828 4" />
                </svg>
                <span class="font-semibold text-xs">
                    ویرایش
                </span>
            </a>
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                    <g fill="currentColor">
                        <path
                            d="M6 5.667A3.667 3.667 0 0 1 9.667 2h8.666A3.667 3.667 0 0 1 22 5.667v8.666A3.667 3.667 0 0 1 18.333 18H9.667A3.667 3.667 0 0 1 6 14.333z" />
                        <path
                            d="M2 9c0-1.094.533-1.828 1.514-2.374a1 1 0 1 1 .972 1.748C4.088 8.595 4 8.716 4 9v10c0 .548.452 1 1 1h9.998c.32 0 .618-.154.805-.407l.065-.1a1 1 0 1 1 1.738.99A3 3 0 0 1 15 22H5c-1.652 0-3-1.348-3-3z" />
                    </g>
                </svg>
                <span class="font-semibold text-xs">
                    رونوشت
                </span>
            </a>
            <div class="block w-full h-px bg-border"></div>
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                    <path fill="currentColor"
                        d="M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2m17 4c.513 0 .936.463.993 1.06l.007.14v7.2c0 1.917-1.249 3.484-2.824 3.594L17 21H7c-1.598 0-2.904-1.499-2.995-3.388L4 17.4v-7.2C4 9.537 4.448 9 5 9zm-5 2h-4l-.117.007a1 1 0 0 0 0 1.986L10 13h4l.117-.007a1 1 0 0 0 0-1.986z" />
                </svg>
                <span class="font-semibold text-xs">
                    بایگانی
                </span>
            </a>
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 rtl:rotate-180">
                    <path fill="currentColor"
                        d="M12 2q-.327 0-.642.005l-.616.017l-.299.013l-.579.034l-.553.046c-4.785.464-6.732 2.411-7.196 7.196l-.046.553l-.034.579q-.008.147-.013.299l-.017.616l-.004.318L2 12q0 .327.005.642l.017.616l.013.299l.034.579l.046.553c.464 4.785 2.411 6.732 7.196 7.196l.553.046l.579.034q.147.008.299.013l.616.017L12 22l.642-.005l.616-.017l.299-.013l.579-.034l.553-.046c4.785-.464 6.732-2.411 7.196-7.196l.046-.553l.034-.579q.008-.147.013-.299l.017-.616L22 12l-.005-.642l-.017-.616l-.013-.299l-.034-.579l-.046-.553c-.464-4.785-2.411-6.732-7.196-7.196l-.553-.046l-.579-.034l-.299-.013l-.616-.017l-.318-.004zm.613 5.21l.094.083l4 4a1 1 0 0 1 .097.112l.071.11l.054.114l.035.105l.03.148L17 12l-.003.075l-.017.126l-.03.111l-.044.111l-.052.098l-.074.104l-.073.082l-4 4a1 1 0 0 1-1.497-1.32l.083-.094L13.585 13H8a1 1 0 0 1-.117-1.993L8 11h5.585l-2.292-2.293a1 1 0 0 1-.083-1.32l.083-.094a1 1 0 0 1 1.32-.083" />
                </svg>
                <span class="font-semibold text-xs">
                    انتقال
                </span>
            </a>
            <div class="block w-full h-px bg-border"></div>
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path
                        d="M12 6a2 2 0 1 0-1.994-1.842L5.323 6.5a2 2 0 1 0 0 3l4.683 2.342a2 2 0 1 0 .67-1.342L5.995 8.158a2.03 2.03 0 0 0 0-.316L10.677 5.5c.353.311.816.5 1.323.5Z" />
                </svg>
                <span class="font-semibold text-xs">
                    اشتراک‌گذاری
                </span>
            </a>
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path
                        d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z" />
                </svg>
                <span class="font-semibold text-xs">
                    افزودن به علاقه‌مندی‌ها
                </span>
            </a>
            <div class="block w-full h-px bg-border"></div>
            <a href="#"
                class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground p-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd"
                        d="M6.414 3c-.464 0-.909.184-1.237.513L1.22 7.47a.75.75 0 0 0 0 1.06l3.957 3.957A1.75 1.75 0 0 0 6.414 13h5.836A2.75 2.75 0 0 0 15 10.25v-4.5A2.75 2.75 0 0 0 12.25 3H6.414ZM8.28 5.72a.75.75 0 0 0-1.06 1.06L8.44 8 7.22 9.22a.75.75 0 1 0 1.06 1.06L9.5 9.06l1.22 1.22a.75.75 0 1 0 1.06-1.06L10.56 8l1.22-1.22a.75.75 0 0 0-1.06-1.06L9.5 6.94 8.28 5.72Z"
                        clip-rule="evenodd" />
                </svg>
                <span class="font-semibold text-xs">
                    حذف
                </span>
            </a>
            <!-- end Action links -->
        </div>
    </div><!-- end Dropdown menu -->
</div><!-- end Dropdown -->

<!-- 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 transition-transform active:scale-95"
        x-on:click="isOpen = !isOpen">
        <span class="max-md:hidden 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-10 size-8 rounded-full overflow-hidden">
                <img src="https://components.spacedev.ir/images/avatars/02.jpg" class="size-full object-cover" alt="..." />
            </span>
            <span class="absolute -end-0.5 -top-0.5 size-3 bg-emerald-500 border-2 border-background rounded-full">
            </span>
        </span><!-- end User Avatar with Online Status Indicator -->

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sm:size-5 size-4 transition-transform"
            x-bind:class="{ 'rotate-180': isOpen }">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m6 9l6 6l6-6" />
        </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-60 bg-background border rounded-lg 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-muted-foreground">
                    example@example.com
                </div>
            </div>

            <!-- Action links -->
            <div class="bg-muted border-t-4 rounded-xl p-1.5">
                <a href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-muted-foreground transition-colors hover:text-foreground hover:bg-background py-2.5 px-4">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2"
                            d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
                    </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-muted-foreground transition-colors hover:text-foreground hover:bg-background py-2.5 px-4">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2">
                            <path
                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
                            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
                        </g>
                    </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-muted-foreground transition-colors hover:text-foreground hover:bg-background py-2.5 px-4">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2"
                            d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
                    </svg>
                    <span class="font-medium text-xs">
                        اعلانات
                    </span>
                </a>
            </div><!-- end Action links -->

            <!-- Logout button -->
            <button type="button"
                class="flex items-center gap-x-1.5 w-full rounded-md cursor-pointer text-destructive/75 transition-colors hover:text-destructive hover:bg-background py-2.5 px-4">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2">
                        <path d="M10 8V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2" />
                        <path d="M15 12H3l3-3m0 6l-3-3" />
                    </g>
                </svg>
                <span class="font-medium text-xs">
                    خروج از حساب
                </span>
            </button><!-- end Logout button -->
        </div>
    </div><!-- end Dropdown menu -->
</div><!-- end User Dropdown -->