این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • پنل کناری
پیش فرض

از این نمونه استفاده کنید تا یک منوی ناوبری را درون کامپوننت پنل کناری نمایش دهید.

<!-- side-panel:wrapper -->
<div x-data="{
                        sidePanelIsOpen: false
                        }">
    <!-- side-panel:trigger -->
    <button type="button"
        class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5"
        x-on:click="sidePanelIsOpen = true">
        <span class="font-semibold text-xs whitespace-nowrap">باز کردن پنل</span>
    </button><!-- end side-panel:trigger -->

    <!-- side-panel -->
    <template x-teleport="body">
        <div x-show="sidePanelIsOpen" x-on:keydown.window.escape="sidePanelIsOpen=false" class="relative z-50">
            <!-- side-panel:overlay -->
            <div x-show="sidePanelIsOpen" x-transition.opacity.duration.600ms x-on:click="sidePanelIsOpen = false"
                class="fixed inset-0 bg-white/5 dark:bg-black/5 backdrop-blur-md"></div>
            <!-- end side-panel:overlay -->

            <div class="fixed inset-0 overflow-hidden">
                <div class="absolute inset-0 overflow-hidden">
                    <div class="fixed inset-y-0 rtl:right-0 ltr:left-0 flex max-w-full pe-10">
                        <div x-show="sidePanelIsOpen" x-on:click.away="sidePanelIsOpen = false"
                            x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
                            x-transition:enter-start="rtl:translate-x-full ltr:-translate-x-full"
                            x-transition:enter-end="translate-x-0"
                            x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                            x-transition:leave-start="translate-x-0"
                            x-transition:leave-end="rtl:translate-x-full ltr:-translate-x-full"
                            class="w-screen max-w-xs">
                            <div
                                class="flex flex-col h-full overflow-y-auto bg-white dark:bg-black border-e border-zinc-200 dark:border-zinc-800 shadow-lg">
                                <!-- side-panel:header -->
                                <div
                                    class="flex items-center justify-between gap-x-4 sticky top-0 bg-white dark:bg-black border-b border-zinc-200 dark:border-zinc-800 p-4 z-10">
                                    <!-- logo -->
                                    <a href="#" class="inline-flex items-center text-black dark:text-white gap-x-2">
                                        <span
                                            class="inline-block w-32 h-5 bg-zinc-100 dark:bg-zinc-900 rounded-full"></span>
                                    </a><!-- end logo -->

                                    <!-- side-panel:close-button -->
                                    <button x-on:click="sidePanelIsOpen = false"
                                        class="text-black dark:text-white focus:outline-none hover:text-red-500">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button><!-- end side-panel:close-button -->
                                </div><!-- end side-panel:header -->

                                <!-- side-panel:content -->
                                <div class="p-4">
                                    <ul class="flex flex-col space-y-1">
                                        <li>
                                            <a href="#"
                                                class="w-full flex items-center gap-x-2 relative bg-zinc-50 dark:bg-zinc-950 border border-solid border-zinc-200 dark:border-zinc-800 rounded-xl text-black dark:text-white transition-all py-2 px-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                    fill="currentColor" class="w-5 h-5">
                                                    <path fill-rule="evenodd"
                                                        d="M2 6.75A.75.75 0 012.75 6h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 6.75zm0 6.5a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                                <span class="font-semibold text-xs">پیشخوان</span>
                                            </a>
                                        </li>
                                        <li x-data="{ open: false }">
                                            <button type="button"
                                                class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                                                x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                                                x-on:click="open = !open">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
                                                </svg>
                                                <span class="font-semibold text-xs">نوشته ها</span>
                                                <span class="absolute rtl:left-3 ltr:right-3"
                                                    x-bind:class="open ? 'rotate-180' : ''">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                    </svg>
                                                </span>
                                            </button>
                                            <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                                                x-show="open">
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">همه</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">نوشته
                                                            جدید</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li x-data="{ open: false }">
                                            <button type="button"
                                                class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                                                x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                                                x-on:click="open = !open">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
                                                </svg>
                                                <span class="font-semibold text-xs">محصول ها</span>
                                                <span class="absolute rtl:left-3 ltr:right-3"
                                                    x-bind:class="open ? 'rotate-180' : ''">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                    </svg>
                                                </span>
                                            </button>
                                            <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                                                x-show="open">
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">همه</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">محصول
                                                            جدید</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li x-data="{ open: false }">
                                            <button type="button"
                                                class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                                                x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                                                x-on:click="open = !open">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                                </svg>
                                                <span class="font-semibold text-xs">سفارش ها</span>
                                                <span class="absolute rtl:left-3 ltr:right-3"
                                                    x-bind:class="open ? 'rotate-180' : ''">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                    </svg>
                                                </span>
                                            </button>
                                            <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                                                x-show="open">
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">همه</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">پیگیری
                                                            سفارش</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">سفارش
                                                            جدید</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#"
                                                class="w-full flex items-center gap-x-2 relative bg-transparent border border-solid border-transparent rounded-xl text-zinc-400 transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                                </svg>
                                                <span class="font-semibold text-xs">رسانه</span>
                                            </a>
                                        </li>
                                        <li x-data="{ open: false }">
                                            <button type="button"
                                                class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                                                x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                                                x-on:click="open = !open">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                                </svg>
                                                <span class="font-semibold text-xs">برگه ها</span>
                                                <span class="absolute rtl:left-3 ltr:right-3"
                                                    x-bind:class="open ? 'rotate-180' : ''">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                    </svg>
                                                </span>
                                            </button>
                                            <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                                                x-show="open">
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">همه</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">برگه
                                                            جدید</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li x-data="{ open: false }">
                                            <button type="button"
                                                class="w-full flex items-center gap-x-2 relative border border-solid rounded-xl transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3"
                                                x-bind:class="open ? 'bg-zinc-50 dark:bg-zinc-950 border-zinc-200 dark:border-zinc-800 text-black dark:text-white' : 'bg-transparent border-transparent text-zinc-400'"
                                                x-on:click="open = !open">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                                                </svg>
                                                <span class="font-semibold text-xs">کاربران</span>
                                                <span class="absolute rtl:left-3 ltr:right-3"
                                                    x-bind:class="open ? 'rotate-180' : ''">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-5 h-5">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                    </svg>
                                                </span>
                                            </button>
                                            <ul class="flex flex-col relative before:content-[''] before:absolute before:inset-y-3 rtl:before:right-3 ltr:before:left-3 before:w-px before:bg-zinc-200 dark:before:bg-zinc-900 py-3 rtl:pr-5 ltr:pl-5"
                                                x-show="open">
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">همه</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#"
                                                        class="w-full flex items-center gap-x-2 bg-transparent rounded-xl text-zinc-400 transition-all group/nav-item hover:text-black dark:hover:text-white py-2 px-3">
                                                        <span
                                                            class="inline-flex w-2 h-px bg-zinc-200 dark:bg-zinc-800 transition-all group-hover/nav-item:w-4 group-hover/nav-item:bg-black dark:group-hover/nav-item:bg-white"></span>
                                                        <span class="font-medium text-xs">کاربر
                                                            جدید</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#"
                                                class="w-full flex items-center gap-x-2 relative bg-transparent border border-solid border-transparent rounded-xl text-zinc-400 transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950 hover:border-zinc-200 dark:hover:border-zinc-800 hover:text-black dark:hover:text-white py-2 px-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                </svg>
                                                <span class="font-semibold text-xs">ساماندهی</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div><!-- end side-panel:content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <!-- end side-panel -->
</div><!-- end side-panel:wrapper -->