<!-- Drawer:wrapper -->
<div x-data="{ drawerIsOpen: false }">
    <!-- Drawer:trigger -->
    <button type="button"
        class="inline-flex items-center justify-center gap-x-2 h-12 bg-background border rounded-lg text-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-4"
        x-on:click="drawerIsOpen = true">
        <span class="font-semibold text-xs">
            بازکردن پنل کشویی
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
            <path
                d="M7.25 1.75a.75.75 0 0 1 1.5 0v1.5a.75.75 0 0 1-1.5 0v-1.5ZM11.536 2.904a.75.75 0 1 1 1.06 1.06l-1.06 1.061a.75.75 0 0 1-1.061-1.06l1.06-1.061ZM14.5 7.5a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75ZM4.464 9.975a.75.75 0 0 1 1.061 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061ZM4.5 7.5a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75ZM5.525 3.964a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 1.06-1.061l1.061 1.06ZM8.779 7.438a.75.75 0 0 0-1.368.366l-.396 5.283a.75.75 0 0 0 1.212.646l.602-.474.288 1.074a.75.75 0 1 0 1.449-.388l-.288-1.075.759.11a.75.75 0 0 0 .726-1.165L8.78 7.438Z" />
        </svg>
    </button><!-- end Drawer:trigger -->

    <!-- Drawer -->
    <template x-teleport="body">
        <div x-show="drawerIsOpen" x-on:keydown.window.escape="drawerIsOpen=false" class="relative z-50">
            <!-- Drawer:overlay -->
            <div x-show="drawerIsOpen" x-transition.opacity.duration.600ms x-on:click="drawerIsOpen = false"
                class="fixed inset-0 bg-background/35 cursor-pointer">
            </div>
            <!-- end Drawer:overlay -->

            <div class="fixed inset-y-0 rtl:right-0 ltr:left-0 flex max-w-full pe-10">
                <div x-show="drawerIsOpen" x-on:click.away="drawerIsOpen = false"
                    x-transition:enter="transition-transform ease-in-out duration-500 sm:duration-700"
                    x-transition:enter-start="-translate-x-full rtl:translate-x-full"
                    x-transition:enter-end="translate-x-0"
                    x-transition:leave="transition-transform ease-in-out duration-500 sm:duration-700"
                    x-transition:leave-start="translate-x-0"
                    x-transition:leave-end="-translate-x-full rtl:translate-x-full" class="w-screen max-w-xs">
                    <div class="flex flex-col h-screen overflow-y-auto bg-background border-e shadow-lg">
                        <!-- Drawer:header -->
                        <div
                            class="flex items-center justify-between gap-x-4 sticky top-0 bg-background px-6 py-3.5 z-10">
                            <h3 class="font-bold text-base">
                                عنوان
                            </h3>

                            <!-- drawer close button -->
                            <button
                                class="inline-flex items-center justify-center absolute end-5 size-7 border rounded-full text-muted-foreground cursor-pointer hover:text-destructive"
                                x-on:click="drawerIsOpen = false">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-4">
                                    <path
                                        d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
                                </svg>
                            </button>
                        </div><!-- end Drawer:header -->

                        <!-- Drawer:content -->
                        <div
                            class="flex-1 flex flex-col h-full bg-muted/25 border-t-4 rounded-t-xl overflow-y-auto p-3">
                            <!-- Placeholder (Remove This) -->
                            <div class="flex-1 relative bg-muted/25 border rounded-lg overflow-hidden">
                                <svg xmlns="http://www.w3.org/2000/svg" class="absolute inset-0 size-full">
                                    <defs>
                                        <pattern patternUnits="userSpaceOnUse" height="48" width="48" id="grid">
                                            <g opacity="0.1">
                                                <path fill="currentColor"
                                                    d="M-0.64647 24.3536L24.3535 -0.646439L23.6464 -1.35355L-1.35358 23.6465L-0.64647 24.3536ZM-0.64647 36.3536L36.3535 -0.646439L35.6464 -1.35355L-1.35358 35.6464L-0.64647 36.3536ZM48.3535 -0.646439L-0.64647 48.3536L-1.35358 47.6465L47.6464 -1.35355L48.3535 -0.646439ZM10.3535 49.3536L49.3535 10.3536L48.6464 9.64645L9.64642 48.6464L10.3535 49.3536ZM49.3535 22.3535L22.3535 49.3535L21.6464 48.6464L48.6464 21.6464L49.3535 22.3535ZM34.3535 49.3536L49.3535 34.3536L48.6464 33.6465L33.6464 48.6464L34.3535 49.3536ZM49.3535 46.3536L46.3535 49.3536L45.6464 48.6465L48.6464 45.6465L49.3535 46.3536ZM-0.64647 12.3536L12.3535 -0.646439L11.6464 -1.35355L-1.35358 11.6465L-0.64647 12.3536Z"
                                                    clip-rule="evenodd" fill-rule="evenodd">
                                                </path>
                                            </g>
                                        </pattern>
                                    </defs>
                                    <rect fill="url(#grid)" height="100%" width="100%">
                                    </rect>
                                </svg>
                            </div><!-- Placeholder (Remove This) -->

                            <!-- ( Actual Drawer Content Goes Here ) -->
                        </div><!-- end Drawer:content -->
                    </div>
                </div>
            </div>
        </div>
    </template>
    <!-- end Drawer -->
</div><!-- end Drawer:wrapper -->