<!-- Layout Container -->
<div class="flex flex-col w-full h-screen bg-muted lg:p-2 lg:ps-72" x-data="{ isSidebarOpen: false }">
<!-- Sidebar -->
<div class="fixed start-0 inset-y-0 flex flex-col gap-y-5 w-72 min-h-screen bg-muted overflow-y-auto transition-transform duration-300 ease-in-out py-2 px-4 z-40"
x-bind:class="isSidebarOpen ? 'max-lg:translate-x-0' : 'max-lg:-translate-x-full rtl:max-lg:translate-x-full'">
<!-- Sidebar Header -->
<div class="flex items-center gap-x-3.5 py-3">
<span class="shrink-0 inline-flex items-center justify-center size-12 bg-background border rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8">
<path
d="M2.87988 18.049C4.23015 12.0557 7.07526 6.6285 11.003 2.17958C11.1105 2.05778 11.2465 1.90742 11.411 1.72851L11.411 1.72849C11.7101 1.40325 12.2162 1.38203 12.5414 1.68109C12.5579 1.69623 12.5737 1.71205 12.5888 1.72851C12.7553 1.90958 12.8929 2.06164 13.0015 2.1847C16.9268 6.63267 19.7703 12.058 21.12 18.049C18.9786 18.5004 16.7797 18.796 14.5359 18.9235L12.4472 23.101C12.3237 23.348 12.0233 23.4481 11.7763 23.3246C11.6796 23.2762 11.6011 23.1977 11.5527 23.101L9.46401 18.9235C7.22018 18.796 5.02133 18.5004 2.87988 18.049ZM11.9999 14.9954C13.6568 14.9954 14.9999 13.6523 14.9999 11.9954C14.9999 10.3386 13.6568 8.99541 11.9999 8.99541C10.3431 8.99541 8.99994 10.3386 8.99994 11.9954C8.99994 13.6523 10.3431 14.9954 11.9999 14.9954Z">
</path>
</svg>
</span>
<div class="grow flex flex-col gap-y-1">
<span class="line-clamp-1 font-bold text-base">پنل مدیریت</span>
<div class="flex items-center gap-x-1 font-medium sm:text-xs text-2xs">
<span class="whitespace-nowrap text-muted-foreground">خوش آمدید 👋،</span>
<span class="line-clamp-1">ج.بهرامی راد</span>
</div>
</div>
<!-- Sidebar Close Button -->
<button type="button"
class="lg:hidden inline-flex items-center justify-center size-7 bg-background border rounded-full text-muted-foreground transition-colors hover:text-destructive"
x-on:click="isSidebarOpen = false">
<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="M18 6L6 18M6 6l12 12" />
</svg>
</button><!-- end Sidebar Close Button -->
</div><!-- end Sidebar Header -->
<!-- Sidebar Navigation Menu -->
<nav class="flex-1 flex flex-col gap-y-1">
<!-- Menu Item: Dashboard -->
<a href="#"
class="flex items-center gap-x-3 w-full bg-background rounded-lg cursor-pointer text-foreground hover:text-foreground hover:bg-background py-2.5 px-3">
<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 13a2 2 0 1 0 4 0a2 2 0 1 0-4 0m3.45-1.45L15.5 9.5" />
<path d="M6.4 20a9 9 0 1 1 11.2 0z" />
</g>
</svg>
<span class="font-medium text-sm">پیشخوان</span>
</a><!-- Menu Item: Dashboard -->
<!-- Section Title -->
<div class="font-medium text-xs text-muted-foreground mt-2 mb-1">
مدیریت فروشگاه
</div><!-- end Section Title -->
<!-- Menu Group: Store -->
<div class="flex flex-col gap-y-1" x-data="{ isOpen: true }">
<button type="button"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer hover:text-foreground hover:bg-background py-2.5 px-3"
x-bind:class="!isOpen ? 'text-muted-foreground' : 'bg-background text-foreground'"
x-on:click="isOpen = !isOpen">
<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="M3 21h18M3 7v1a3 3 0 0 0 6 0V7m0 1a3 3 0 0 0 6 0V7m0 1a3 3 0 0 0 6 0V7H3l2-4h14l2 4M5 21V10.85M19 21V10.85M9 21v-4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4" />
</svg>
<span class="font-medium text-sm">فروشگاه</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-4 transition-transform ms-auto" 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>
<div class="flex flex-col gap-y-0.5 relative before:absolute before:start-4.5 before:inset-y-0 before:w-px before:bg-border ps-6"
x-show="isOpen">
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M5 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z" />
<path d="m9 12l2 2l4-4" />
</g>
</svg>
<span class="font-medium text-sm">برندها</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m0 12h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1m10-4h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1m0-8h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1" />
</svg>
<span class="font-medium text-sm">دسته بندی</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M21 16.008V7.99a1.98 1.98 0 0 0-1-1.717l-7-4.008a2.02 2.02 0 0 0-2 0L4 6.273c-.619.355-1 1.01-1 1.718v8.018c0 .709.381 1.363 1 1.717l7 4.008a2.02 2.02 0 0 0 2 0l7-4.008c.619-.355 1-1.01 1-1.718M12 22V12m0 0l8.73-5.04m-17.46 0L12 12" />
</svg>
<span class="font-medium text-sm">محصولات</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9s-9-1.8-9-9s1.8-9 9-9M9 15.075l6-6m-6 .03v.015m6 6v.015" />
</svg>
<span class="font-medium text-sm">تخفیف و شگفت انگیز</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M18 8a3 3 0 0 1 0 6m-8-6v11a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-5" />
<path
d="m12 8l4.524-3.77A.9.9 0 0 1 18 4.922v12.156a.9.9 0 0 1-1.476.692L12 14H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z" />
</g>
</svg>
<span class="font-medium text-sm">تبلیغات</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
</div>
</div><!-- end Menu Group: Store -->
<!-- Other Menus -->
<div class="flex flex-col gap-y-1" x-data="{ isOpen: false }">
<button type="button"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer hover:text-foreground hover:bg-background py-2.5 px-3"
x-bind:class="!isOpen ? 'text-muted-foreground' : 'bg-background text-foreground'"
x-on:click="isOpen = !isOpen">
<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="M6.331 8H17.67a2 2 0 0 1 1.977 2.304l-1.255 8.152A3 3 0 0 1 15.426 21H8.574a3 3 0 0 1-2.965-2.544l-1.255-8.152A2 2 0 0 1 6.331 8" />
<path d="M9 11V6a3 3 0 0 1 6 0v5" />
</g>
</svg>
<span class="font-medium text-sm">سفارشات</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-4 transition-transform ms-auto" 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>
<div class="flex flex-col gap-y-0.5 relative before:absolute before:start-4.5 before:inset-y-0 before:w-px before:bg-border ps-6"
x-show="isOpen">
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01" />
</svg>
<span class="font-medium text-sm">لیست سفارشات</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0" />
<path d="M5 17H3v-4M2 5h11v12m-4 0h6m4 0h2v-6h-8m0-5h5l3 5M3 9h4" />
</g>
</svg>
<span class="font-medium text-sm">سفارشات ارسال‌شده</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M4 12V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8m0 4H3m3-3l-3 3l3 3" />
</svg>
<span class="font-medium text-sm">مرجوعی‌ها</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
<path
d="M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2m0 9h.01M9 17h.01M12 16l1 1l3-3" />
</g>
</svg>
<span class="font-medium text-sm">فاکتورها</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground group/link hover:text-foreground hover:bg-background py-2.5 px-3">
<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 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" />
</svg>
<span class="font-medium text-sm">روش‌های ارسال</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="size-3.5 rtl:rotate-180 transition-transform scale-0 group-hover/link:scale-100 ms-auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m9 6l6 6l-6 6" />
</svg>
</a>
</div>
</div>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M15 8h.01M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9s-9-1.8-9-9s1.8-9 9-9" />
<path d="M3.5 15.5L8 11c.928-.893 2.072-.893 3 0l5 5" />
<path d="m14 14l1-1c.928-.893 2.072-.893 3 0l2.5 2.5" />
</g>
</svg>
<span class="font-medium text-sm">مدیریت رسانه</span>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground hover:text-foreground hover:bg-background py-2.5 px-3">
<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 3.2A9 9 0 1 0 20.8 14a1 1 0 0 0-1-1H13a2 2 0 0 1-2-2V4a.9.9 0 0 0-1-.8" />
<path d="M15 3.5A9 9 0 0 1 20.5 9H16a1 1 0 0 1-1-1z" />
</g>
</svg>
<span class="font-medium text-sm">گزارشات</span>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground hover:text-foreground hover:bg-background py-2.5 px-3">
<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 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z" />
</svg>
<span class="font-medium text-sm">نظرات و پرسش‌ها</span>
<span
class="inline-flex items-center justify-center min-w-5 h-5 bg-warning rounded-md font-medium text-center text-2xs text-warning-foreground px-1">2</span>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground hover:text-foreground hover:bg-background py-2.5 px-3">
<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 8a3.5 3 0 0 1 3.5-3h1A3.5 3 0 0 1 16 8a3 3 0 0 1-2 3a3 4 0 0 0-2 4m0 4v.01" />
</svg>
<span class="font-medium text-sm">سوالات متداول</span>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground hover:text-foreground hover:bg-background py-2.5 px-3">
<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="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85" />
</svg>
<span class="font-medium text-sm">کاربران</span>
</a>
<a href="#"
class="flex items-center gap-x-3 w-full rounded-lg cursor-pointer text-muted-foreground hover:text-foreground hover:bg-background py-2.5 px-3 mt-auto mb-3">
<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-sm">تنظیمات</span>
</a><!-- end Other Menus -->
</nav><!-- end Sidebar Navigation Menu -->
</div><!-- end Sidebar -->
<!-- Main Content Area -->
<div class="h-full flex flex-col bg-background lg:border lg:rounded-lg">
<!-- Top Header -->
<header class="flex items-center sm:gap-x-5 gap-x-3 sticky top-0 bg-background border-b rounded-t-lg p-3 z-20">
<div class="grow flex items-center gap-x-1.5">
<!-- Sidebar Open Button -->
<button type="button"
class="lg:hidden shrink-0 inline-flex items-center justify-center size-10 cursor-pointer transition-transform active:scale-95"
x-on:click="isSidebarOpen = true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button><!-- end Sidebar Open Button -->
<span class="lg:hidden inline-block w-px h-5 bg-border"></span>
<!-- Search -->
<form action="#" class="grow w-full lg:max-w-xs">
<div class="relative flex items-center">
<input type="text"
class="w-full h-10 lg:bg-input rounded-lg font-medium text-xs placeholder:text-muted-foreground outline-hidden pe-3 ps-10"
placeholder="جستجو.." />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="absolute start-3 size-5 text-muted-foreground/75">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11.5" cy="11.5" r="9.5" />
<path stroke-linecap="round" d="M18.5 18.5L22 22" />
</g>
</svg>
</div>
</form>
<!-- end Search -->
</div>
<div class="flex items-center sm:gap-x-5 gap-x-2.5 ms-auto">
<!-- Toggle Dark Mode Button -->
<button type="button"
class="inline-flex items-center justify-center sm:size-10 size-8 cursor-pointer transition-transform active:scale-95 ms-auto"
x-on:click="$store.darkMode.toggle()">
<!-- Icon:Sun -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 hidden dark:block">
<path fill="currentColor" fill-rule="evenodd"
d="M12 1.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75M4.399 4.399a.75.75 0 0 1 1.06 0l.393.392a.75.75 0 0 1-1.06 1.061l-.393-.393a.75.75 0 0 1 0-1.06m15.202 0a.75.75 0 0 1 0 1.06l-.393.393a.75.75 0 0 1-1.06-1.06l.393-.393a.75.75 0 0 1 1.06 0M12 6.75a5.25 5.25 0 1 0 0 10.5a5.25 5.25 0 0 0 0-10.5M5.25 12a6.75 6.75 0 1 1 13.5 0a6.75 6.75 0 0 1-13.5 0m-4 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75m19 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m-2.102 6.148a.75.75 0 0 1 1.06 0l.393.393a.75.75 0 1 1-1.06 1.06l-.393-.393a.75.75 0 0 1 0-1.06m-12.296 0a.75.75 0 0 1 0 1.06l-.393.393a.75.75 0 1 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.061 0M12 20.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75"
clip-rule="evenodd" />
</svg>
<!-- Icon:Moon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 dark:hidden">
<g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
<path
d="M20.366 2.124c-.328-.832-1.504-.832-1.83 0l-.429 1.09l-1.084.429c-.83.328-.83 1.504 0 1.832l1.084.43l.428 1.089c.327.832 1.503.832 1.83 0l.429-1.09l1.084-.429c.83-.328.83-1.504 0-1.832l-1.084-.43zm-.916.406l.415 1.055c.1.254.3.455.554.556l1.057.418l-1.057.419a.98.98 0 0 0-.554.555l-.415 1.055l-.414-1.055a.98.98 0 0 0-.554-.555l-1.057-.419l1.057-.418a.98.98 0 0 0 .554-.556zm-2.952 5.417c-.327-.833-1.503-.833-1.83 0l-.155.393l-.39.155c-.83.328-.83 1.504 0 1.833l.39.154l.155.394c.327.832 1.503.832 1.83 0l.155-.394l.39-.154c.83-.329.83-1.505 0-1.833l-.39-.155zm-.915.405l.141.36c.1.253.3.455.554.555l.364.144l-.364.144a.98.98 0 0 0-.554.556l-.141.36l-.141-.36a.98.98 0 0 0-.554-.556l-.364-.144l.364-.144a.98.98 0 0 0 .554-.555z" />
<path
d="M11.017 2.802a9.25 9.25 0 1 0 10.181 10.181A7.25 7.25 0 1 1 11.017 2.802M1.25 12C1.25 6.063 6.063 1.25 12 1.25c.717 0 1.075.571 1.137 1.026c.059.438-.103.995-.606 1.299a5.75 5.75 0 1 0 7.894 7.894c.304-.503.861-.665 1.299-.606c.455.062 1.026.42 1.026 1.137c0 5.937-4.813 10.75-10.75 10.75S1.25 17.937 1.25 12" />
</g>
</svg>
</button><!-- end Toggle Dark Mode Button -->
<!-- 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-lg overflow-hidden">
<img src="/images/avatars/default.jpg" class="size-full object-cover" alt="..." />
</span>
<span
class="absolute -end-1 -top-1 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 -->
<div class="absolute end-1 top-full pt-1.5" x-show="isOpen" x-on:click.outside="isOpen = false">
<div class="w-56 bg-background border rounded-lg space-y-2 p-3.5">
<!-- User Profile Summary -->
<div class="flex items-center gap-x-2.5">
<span class="shrink-0 inline-flex relative">
<span class="inline-block sm:size-10 size-8 rounded-lg overflow-hidden">
<img src="/images/avatars/default.jpg" class="size-full object-cover"
alt="..." />
</span>
<span
class="absolute -end-1 -top-1 size-3 bg-emerald-500 border-2 border-background rounded-full">
</span>
</span>
<div class="grow flex flex-col gap-y-1">
<span class="block truncate font-semibold text-xs">
ج.بهرامی راد
</span>
<span class="block truncate font-sans font-semibold text-2xs text-muted-foreground">
example@example.com
</span>
</div>
</div><!-- end User Profile Summary -->
<!-- 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>
</div><!-- end User Dropdown -->
</div>
</header><!-- end Top Header -->
<!-- Page Content -->
<main class="flex-1 flex flex-col h-full overflow-y-auto p-3">
<!-- Placeholder (Remove This) -->
<div class="flex-1 relative bg-background 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 Page Content Goes Here ) -->
</main><!-- end Page Content -->
</div><!-- end Main Content Area -->
<!-- Sidebar Overlay -->
<div class="lg:hidden fixed inset-0 size-full bg-black/25 transition-all z-30"
x-bind:class="isSidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible'" x-on:click="isSidebarOpen = false">
</div><!-- Sidebar Overlay -->
</div><!-- end Layout Container -->