چت

<!-- Layout Container -->
<div class="flex flex-col h-screen w-full bg-surface-1 lg:ps-96 md:ps-80"
    x-data="{ isNavigationOpen: false, activeTab: 'all', selectedChat: null }">
    <!-- Sidebar -->
    <div class="fixed inset-y-0 start-0 flex flex-col lg:w-96 md:w-80 w-full h-screen bg-surface-1 md:border-e">
        <div class="shrink-0 flex gap-5 lg:p-4 p-3">
            <button type="button" class="inline-flex items-center justify-center w-10 cursor-pointer outline-hidden"
                x-on:click="isNavigationOpen = true">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd"
                        d="M2 3.75A.75.75 0 0 1 2.75 3h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75ZM2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8Zm0 4.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
                        clip-rule="evenodd" />
                </svg>
            </button>
            <div class="grow relative flex items-center">
                <input type="text" name="s"
                    class="block w-full h-9 bg-surface rounded-lg font-medium text-xs outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-1/75 placeholder:text-surface-2-content/70 pe-3 ps-8"
                    placeholder="جستجو.." autocomplete="off" />

                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                    class="absolute start-3 text-surface-2-content">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2">
                        <path d="m21 21l-4.34-4.34" />
                        <circle cx="11" cy="11" r="8" />
                    </g>
                </svg>
            </div>
        </div>
        <div class="flex-1 flex gap-1.5 lg:p-4 p-3">
            <div class="shrink-0 w-20 flex flex-col lg:gap-y-1.5 gap-y-1">
                <button type="button"
                    class="inline-flex flex-col items-center justify-center gap-y-2 w-full rounded-xl cursor-pointer hover:bg-surface-2 hover:text-surface-content p-2.5"
                    x-bind:class="activeTab === 'all' ? 'bg-surface-2 text-surface-content' : 'text-surface-2-content'"
                    x-on:click="activeTab = 'all'">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                    </svg>
                    <span class="line-clamp-1 font-semibold text-2xs">گفتگوها</span>
                </button>
                <button type="button"
                    class="inline-flex flex-col items-center justify-center gap-y-2 w-full rounded-xl cursor-pointer hover:bg-surface-2 hover:text-surface-content p-2.5"
                    x-bind:class="activeTab === 'unread' ? 'bg-surface-2 text-surface-content' : 'text-surface-2-content'"
                    x-on:click="activeTab = 'unread'">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
                    </svg>
                    <span class="line-clamp-1 font-semibold text-2xs">خوانده نشده</span>
                </button>
                <button type="button"
                    class="inline-flex flex-col items-center justify-center gap-y-2 w-full rounded-xl cursor-pointer hover:bg-surface-2 hover:text-surface-content p-2.5"
                    x-bind:class="activeTab === 'pv' ? 'bg-surface-2 text-surface-content' : 'text-surface-2-content'"
                    x-on:click="activeTab = 'pv'">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                    </svg>
                    <span class="line-clamp-1 font-semibold text-2xs">خصوصی</span>
                </button>
                <button type="button"
                    class="inline-flex flex-col items-center justify-center gap-y-2 w-full rounded-xl cursor-pointer hover:bg-surface-2 hover:text-surface-content p-2.5"
                    x-bind:class="activeTab === 'groups' ? 'bg-surface-2 text-surface-content' : 'text-surface-2-content'"
                    x-on:click="activeTab = 'groups'">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                    </svg>
                    <span class="line-clamp-1 font-semibold text-2xs">گروهها</span>
                </button>
                <button type="button"
                    class="inline-flex flex-col items-center justify-center gap-y-2 w-full rounded-xl cursor-pointer hover:bg-surface-2 hover:text-surface-content p-2.5"
                    x-bind:class="activeTab === 'channels' ? 'bg-surface-2 text-surface-content' : 'text-surface-2-content'"
                    x-on:click="activeTab = 'channels'">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" />
                    </svg>
                    <span class="line-clamp-1 font-semibold text-2xs">کانال</span>
                </button>
                <button type="button"
                    class="inline-flex flex-col items-center justify-center gap-y-2 w-full rounded-xl cursor-pointer hover:bg-surface-2 hover:text-surface-content p-2.5"
                    x-bind:class="activeTab === 'robots' ? 'bg-surface-2 text-surface-content' : 'text-surface-2-content'"
                    x-on:click="activeTab = 'robots'">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
                    </svg>
                    <span class="line-clamp-1 font-semibold text-2xs">ربات</span>
                </button>
            </div>
            <div class="grow flex flex-col gap-y-1.5">
                <button type="button"
                    class="flex items-center gap-x-2.5 rounded-xl cursor-pointer outline-hidden hover:bg-surface dark:hover:bg-surface-2 p-2.5"
                    x-bind:class="{'bg-surface dark:bg-surface-2': selectedChat === 'chat-1'}"
                    x-on:click="selectedChat = 'chat-1'">
                    <span class="shrink-0 inline-flex relative">
                        <span class="inline-block size-12 border-2 rounded-full overflow-hidden">
                            <img src="https://blocks.spacedev.ir/images/avatars/1323.jpg" class="size-full object-cover"
                                alt="..." />
                        </span>
                    </span>

                    <span class="grow flex flex-col gap-y-1.5">
                        <span class="flex items-center gap-x-1.5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                class="size-4">
                                <path
                                    d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
                            </svg>
                            <span class="line-clamp-1 font-semibold text-xs">خانواده ❤️</span>

                            <span class="flex items-center gap-x-1 ms-auto">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    class="shrink-0 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>

                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    viewBox="0 0 256 256" class="shrink-0">
                                    <path d="M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z" opacity="0.2"></path>
                                    <path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"></path>
                                </svg>

                                <span class="font-semibold text-2xs text-surface-2-content">۲۳:۴۱</span>
                            </span>
                        </span>
                        <span class="flex items-center gap-x-0.5">
                            <span class="font-semibold text-xs">مامان</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                viewBox="0 0 256 256">
                                <path d="M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z" opacity="0.2"></path>
                                <path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"></path>
                            </svg>
                            <span class="inline-flex items-center gap-x-1 text-surface-2-content">
                                <span class="line-clamp-1 font-semibold text-2xs">در حال نوشتن</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                                    <circle cx="4" cy="12" r="3" fill="currentColor" class="shrink-0 opacity-65">
                                        <animate attributeName="cy" begin="0s" dur="1s" repeatCount="indefinite"
                                            calcMode="spline" keySplines=".33,.66,.66,1;.33,0,.66,.33"
                                            values="12;6;12" />
                                    </circle>
                                    <circle cx="12" cy="12" r="3" fill="currentColor">
                                        <animate attributeName="cy" begin="0.1s" dur="1s" repeatCount="indefinite"
                                            calcMode="spline" keySplines=".33,.66,.66,1;.33,0,.66,.33"
                                            values="12;6;12" />
                                    </circle>
                                    <circle cx="20" cy="12" r="3" fill="currentColor">
                                        <animate attributeName="cy" begin="0.2s" dur="1s" repeatCount="indefinite"
                                            calcMode="spline" keySplines=".33,.66,.66,1;.33,0,.66,.33"
                                            values="12;6;12" />
                                    </circle>
                                </svg>
                            </span>
                        </span>
                        <span class="flex items-center gap-x-1.5">
                            <span class="line-clamp-1 font-medium text-start text-2xs text-surface-2-content">
                                درود، کسی خبر داره امشب قراره شام چی بخوریم؟ 😐
                            </span>

                            <span class="flex items-center gap-x-1.5 ms-auto">
                                <span
                                    class="shrink-0 inline-flex items-center justify-center min-w-4 h-4 bg-blue-500 rounded-lg font-semibold text-2xs text-white pt-px px-1.5">2</span>

                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    class="shrink-0 text-surface-2-content">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2"
                                        d="M9 4v6l-2 4v2h10v-2l-2-4V4m-3 12v5M8 4h8" />
                                </svg>
                            </span>
                        </span>
                    </span>
                </button>
                <button type="button"
                    class="flex items-center gap-x-2.5 rounded-xl cursor-pointer outline-hidden hover:bg-surface dark:hover:bg-surface-2 p-2.5"
                    x-bind:class="{'bg-surface dark:bg-surface-2': selectedChat === 'chat-2'}"
                    x-on:click="selectedChat = 'chat-2'">
                    <span class="shrink-0 inline-flex relative">
                        <span class="inline-block size-12 border-2 rounded-full overflow-hidden">
                            <img src="https://blocks.spacedev.ir/images/avatars/04.jpg" class="size-full object-cover"
                                alt="..." />
                        </span>
                        <span class="absolute end-1.5 bottom-0 size-2 bg-emerald-500 ring-2 ring-white rounded-full">
                        </span>
                    </span>

                    <span class="grow flex flex-col gap-y-1.5">
                        <span class="flex items-center gap-x-1.5">
                            <span class="line-clamp-1 font-semibold text-xs">نیکا کیانی</span>

                            <span class="flex items-center gap-x-1 ms-auto">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    class="shrink-0 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>

                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    viewBox="0 0 256 256" class="shrink-0">
                                    <path d="M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z" opacity="0.2"></path>
                                    <path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z"></path>
                                </svg>

                                <span class="font-semibold text-2xs text-surface-2-content">۱۷:۵۵</span>
                            </span>
                        </span>
                        <span class="flex items-center gap-x-1.5">
                            <span class="line-clamp-1 font-medium text-start text-2xs text-surface-2-content">
                                سلام 👋 حالت چطوره؟ فردا وقت داری؟
                            </span>
                        </span>
                    </span>
                </button>
            </div>
        </div>
    </div><!-- end Sidebar -->

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col relative h-full bg-surface-1 transition-transform duration-300 ease-in-out z-40"
        x-bind:class="selectedChat !== null ? 'translate-x-0' : 'ltr:max-md:-translate-x-full rtl:max-md:translate-x-full'"
        x-cloak>
        <div class="max-md:hidden flex-1 flex flex-col items-center justify-center" x-show="selectedChat === null">
            <span
                class="flex items-center gap-x-1.5 bg-surface dark:bg-surface-2 rounded-full font-semibold text-xs text-surface-2-content px-2.5 py-2">
                یک گفتگو را برای شروع پیام‌رسانی انتخاب کنید
            </span>
        </div>

        <div class="flex-1 flex flex-col h-full" x-show="selectedChat !== null">
            <!-- Top Header -->
            <div
                class="sticky top-0 flex items-center gap-x-5 bg-surface-1/70 backdrop-blur-lg border-b py-4 px-6 z-40">
                <button type="button"
                    class="md:hidden inline-flex items-center justify-center size-8 bg-surface-2 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
                    x-on:click="selectedChat = null">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                        class="rtl:rotate-180">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m15 18l-6-6l6-6" />
                    </svg>
                </button>
                <div class="flex flex-col items-start gap-y-1">
                    <span class="line-clamp-1 font-semibold text-xs">خانواده ❤️</span>
                    <span class="line-clamp-1 font-semibold text-2xs text-surface-2-content">۸ عضو</span>
                </div>

                <div class="flex items-center gap-x-3 ms-auto">
                    <button type="button"
                        class="inline-flex items-center justify-center size-8 rounded-lg cursor-pointer text-surface-2-content hover:bg-surface-2 hover:text-surface-content">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2">
                                <path d="m21 21l-4.34-4.34" />
                                <circle cx="11" cy="11" r="8" />
                            </g>
                        </svg>
                    </button>
                    <button type="button"
                        class="inline-flex items-center justify-center size-8 rounded-lg cursor-pointer text-surface-2-content hover:bg-surface-2 hover:text-surface-content">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            class="rtl:rotate-180">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2">
                                <rect width="18" height="18" x="3" y="3" rx="2" />
                                <path d="M9 3v18m5-12l3 3l-3 3" />
                            </g>
                        </svg>
                    </button>

                    <!-- Dropdown -->
                    <div class="inline-flex relative" x-data="{ isOpen: false }">
                        <!-- Dropdown trigger button -->
                        <button type="button"
                            class="inline-flex items-center justify-center size-8 rounded-lg cursor-pointer text-surface-2-content hover:bg-surface-2 hover:text-surface-content"
                            x-on:click="isOpen = !isOpen">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0-14a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
                            </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="flex flex-col gap-y-0.5 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-0.5">
                                    <button type="button"
                                        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" width="16" height="16"
                                            viewBox="0 0 24 24">
                                            <g fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2">
                                                <rect width="20" height="5" x="2" y="3" rx="1" />
                                                <path
                                                    d="M4 8v11a2 2 0 0 0 2 2h2M20 8v11a2 2 0 0 1-2 2h-2m-7-6l3-3l3 3m-3-3v9" />
                                            </g>
                                        </svg>
                                        <span class="font-medium text-xs">
                                            بایگانی
                                        </span>
                                    </button>
                                    <button type="button"
                                        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" width="16" height="16"
                                            viewBox="0 0 24 24">
                                            <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2"
                                                d="m16 22l-1-4m4-4.01a1 1 0 0 0 1-1V12a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v.99a1 1 0 0 0 1 1M5 14h14l1.973 6.767A1 1 0 0 1 20 22H4a1 1 0 0 1-.973-1.233zm3 8l1-4" />
                                        </svg>
                                        <span class="font-medium text-xs">
                                            پاک کردن تاریخچه
                                        </span>
                                    </button>

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

                                    <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" width="16" height="16"
                                            viewBox="0 0 24 24">
                                            <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2"
                                                d="m16 17l5-5l-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                                        </svg>
                                        <span class="font-medium text-xs">
                                            ترک گروه
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div><!-- end Dropdown menu -->
                    </div><!-- end Dropdown -->
                </div>
            </div><!-- end Top Header -->

            <!-- Page Content -->
            <div class="flex-1 flex flex-col relative overflow-auto">
                <!-- Chat Container -->
                <div
                    class="relative before:content-[''] before:block before:sticky before:top-0 before:w-full before:h-10 before:bg-linear-to-t before:to-surface-1 before:z-20 after:content-[''] after:block after:sticky after:bottom-0 after:w-full after:h-10 after:bg-linear-to-b after:to-surface-1 after:z-30 p-8">
                    <div class="flex-1 flex flex-col gap-y-3 relative z-10">
                        <!-- Message -->
                        <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
                            <span class="inline-block size-10 rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/02.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>

                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="absolute start-9 -top-3.5 w-5 text-surface dark:text-surface-2 rtl:-scale-x-90">
                                    <path
                                        d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                                        fill="currentColor" />
                                </svg>
                                <p class="font-medium text-xs text-surface-2-content">
                                    درود، کسی خبر داره امشب قراره شام چی بخوریم؟ 😐
                                </p>
                            </div>

                            <div class="flex items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:42 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-end gap-y-2.5 w-full max-w-sm ms-auto">
                            <span class="inline-block size-10 rounded-full overflow-hidden ms-auto">
                                <img src="https://blocks.spacedev.ir/images/avatars/01.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>

                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="absolute end-9 -top-3.5 w-5 text-surface dark:text-surface-2 ltr:-scale-x-90">
                                    <path
                                        d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                                        fill="currentColor" />
                                </svg>
                                <p class="font-medium text-xs text-surface-2-content">
                                    درود 😄 مامان گفته قرمه‌سبزی داریم.
                                </p>
                            </div>

                            <div class="flex flex-row-reverse items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:43 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
                            <span class="inline-block size-10 rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/02.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>

                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="absolute start-9 -top-3.5 w-5 text-surface dark:text-surface-2 rtl:-scale-x-90">
                                    <path
                                        d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                                        fill="currentColor" />
                                </svg>
                                <p class="font-medium text-xs text-surface-2-content">
                                    ای جان 👌
                                </p>
                            </div>

                            <div class="flex items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:43 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <p class="font-medium text-xs text-surface-2-content">
                                    پس من زودتر راه می‌افتم
                                </p>
                            </div>

                            <div class="flex items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:44 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <p class="font-medium text-xs text-surface-2-content">
                                    گشنه‌م شده 😂
                                </p>
                            </div>

                            <div class="flex items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:44 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-end gap-y-2.5 w-full max-w-sm ms-auto">
                            <span class="inline-block size-10 rounded-full overflow-hidden ms-auto">
                                <img src="https://blocks.spacedev.ir/images/avatars/01.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>

                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="absolute end-9 -top-3.5 w-5 text-surface dark:text-surface-2 ltr:-scale-x-90">
                                    <path
                                        d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                                        fill="currentColor" />
                                </svg>
                                <p class="font-medium text-xs text-surface-2-content">
                                    آره بجنب 😄
                                </p>
                            </div>

                            <div class="flex flex-row-reverse items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:45 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-end gap-y-2.5 w-full max-w-sm ms-auto">
                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <p class="font-medium text-xs text-surface-2-content">
                                    بابا هم زنگ زد گفت ده دقیقه دیگه میاد
                                </p>
                            </div>

                            <div class="flex flex-row-reverse items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:45 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-blue-500">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m7 12l5 5L22 7M2 12l5 5m5-5l5-5" />
                                </svg>
                            </div>
                        </div><!-- end Message -->

                        <!-- Message -->
                        <div class="flex flex-col items-start gap-y-2.5 w-full max-w-sm">
                            <span class="inline-block size-10 rounded-full overflow-hidden">
                                <img src="https://blocks.spacedev.ir/images/avatars/02.jpg"
                                    class="size-full object-cover" alt="..." />
                            </span>

                            <div class="relative bg-surface dark:bg-surface-2 rounded-2xl p-3.5">
                                <svg viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="absolute start-9 -top-3.5 w-5 text-surface dark:text-surface-2 rtl:-scale-x-90">
                                    <path
                                        d="M2.8481 0C7.8767 0.317617 15.2114 3.54938 22 16C22 16 0 16 0 16C2.7238 14.8354 10.6424 10.4179 2.8481 0Z"
                                        fill="currentColor" />
                                </svg>
                                <p class="font-medium text-xs text-surface-2-content">
                                    عالیه، می‌بینمتون ❤️
                                </p>
                            </div>

                            <div class="flex items-center gap-x-2">
                                <span class="font-medium text-2xs text-surface-2-content">19:46 شب</span>
                                <span class="inline-block size-1 bg-border rounded-full"></span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    class="size-4 text-surface-2-content">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2" d="m5 12l5 5L20 7" />
                                </svg>
                            </div>
                        </div><!-- end Message -->
                    </div>
                </div><!-- end Chat Container -->
            </div><!-- end Page Content -->

            <div class="sticky bottom-0 flex items-end md:gap-5 gap-3 bg-surface-1 border-t py-4 px-6 z-30">
                <button type="button"
                    class="inline-flex items-center justify-center size-8 rounded-lg cursor-pointer text-surface-2-content hover:bg-surface-2 hover:text-surface-content">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2"
                            d="m16 6l-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" />
                    </svg>
                </button>

                <!-- write a message -->
                <div class="grow">
                    <textarea name="text" x-data="{ 
                                    resize () { 
                                        $el.style.height = '0px'; 
                                        $el.style.height = $el.scrollHeight + 'px' 
                                    } 
                                }" x-init="resize()" @input="resize()" placeholder="نوشتن پیام ..."
                        class="flex w-full h-8 min-h-8 appearance-none resize-none bg-transparent text-xs outline-hidden py-2 px-3"></textarea>
                </div>
                <!-- end write a message -->

                <button type="button"
                    class="inline-flex items-center justify-center size-8 rounded-lg cursor-pointer text-surface-2-content hover:bg-surface-2 hover:text-surface-content">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2">
                            <circle cx="12" cy="12" r="10" />
                            <path d="M8 14s1.5 2 4 2s4-2 4-2M9 9h.01M15 9h.01" />
                        </g>
                    </svg>
                </button>
                <button type="button"
                    class="inline-flex items-center justify-center size-8 rounded-lg cursor-pointer text-surface-2-content hover:bg-surface-2 hover:text-surface-content">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2">
                            <path d="M12 19v3m7-12v2a7 7 0 0 1-14 0v-2" />
                            <rect width="6" height="13" x="9" y="2" rx="3" />
                        </g>
                    </svg>
                </button>
            </div>
        </div>
    </div><!-- end Main Content Area -->

    <!-- Navigation -->
    <div class="fixed inset-y-0 start-0 flex flex-col w-64 h-screen bg-surface dark:bg-surface-2 rounded-e-2xl transition-transform duration-300 ease-in-out z-50"
        x-bind:class="isNavigationOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full'" x-cloak>
        <!-- Navigation Header -->
        <div class="sticky top-0 flex flex-col items-start gap-y-2.5 border-b p-5">
            <span class="inline-block relative size-14 border-2 border-white rounded-full overflow-hidden z-40">
                <img src="https://blocks.spacedev.ir/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
            </span>
            <span class="line-clamp-1 font-semibold text-xs">نیکی فرهمند</span>

            <button type="button"
                class="absolute end-3 top-3 inline-flex items-center justify-center size-8 bg-surface-2 dark:bg-surface-3 rounded-lg cursor-pointer text-surface-2-content hover:text-surface-content"
                x-on:click="darkMode = !darkMode">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="dark:hidden">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2">
                        <circle cx="12" cy="12" r="4" />
                        <path
                            d="M12 4h.01M20 12h.01M12 20h.01M4 12h.01m13.647-5.657h.01m-.01 11.314h.01m-11.324 0h.01m-.01-11.314h.01" />
                    </g>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                    class="dark:block hidden">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2"
                        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
                </svg>
            </button>
        </div><!-- end Navigation Header -->

        <!-- Navigation Menu -->
        <div class="flex-1 flex flex-col gap-y-1 overflow-auto p-5">
            <button type="button" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    گروه جدید
                </span>
            </button>
            <button type="button" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    کانال جدید
                </span>
            </button>
            <button type="button" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    مخاطبین
                </span>
            </button>
            <button type="button" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    پیام های ذخیره شده
                </span>
            </button>
            <button type="button" class="flex items-center gap-x-2.5 cursor-pointer py-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-surface-2-content">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                </svg>
                <span class="line-clamp-1 font-semibold text-xs">
                    تنظیمات
                </span>
            </button>
        </div><!-- end Navigation Menu -->
    </div><!-- end Navigation -->

    <!-- Navigation Overlay -->
    <div class="fixed inset-0 size-full bg-black/25 transition-all z-40"
        x-bind:class="isNavigationOpen ? 'opacity-100 visible' : 'opacity-0 invisible'"
        x-on:click="isNavigationOpen = false">
    </div><!-- Navigation Overlay -->
</div><!-- end Layout Container -->