1395 lines
65 KiB
HTML
1395 lines
65 KiB
HTML
<aside
|
|
:class="sidebarToggle ? 'translate-x-0 lg:w-[90px]' : '-translate-x-full'"
|
|
class="sidebar fixed left-0 top-0 z-9999 flex h-screen w-[290px] flex-col overflow-y-hidden border-r border-gray-200 bg-white px-5 duration-300 ease-linear dark:border-gray-800 dark:bg-black lg:static lg:translate-x-0"
|
|
@click.outside="sidebarToggle = false"
|
|
>
|
|
<!-- SIDEBAR HEADER -->
|
|
<div
|
|
:class="sidebarToggle ? 'justify-center' : 'justify-between'"
|
|
class="sidebar-header flex items-center gap-2 pb-7 pt-8"
|
|
>
|
|
<a href="index.html">
|
|
<span class="logo" :class="sidebarToggle ? 'hidden' : ''">
|
|
<img class="dark:hidden" src="./images/logo/logo.svg" alt="Logo" />
|
|
<img
|
|
class="hidden dark:block"
|
|
src="./images/logo/logo-dark.svg"
|
|
alt="Logo"
|
|
/>
|
|
</span>
|
|
|
|
<img
|
|
class="logo-icon"
|
|
:class="sidebarToggle ? 'lg:block' : 'hidden'"
|
|
src="./images/logo/logo-icon.svg"
|
|
alt="Logo"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<!-- SIDEBAR HEADER -->
|
|
|
|
<div
|
|
class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear"
|
|
>
|
|
<!-- Sidebar Menu -->
|
|
<nav x-data="{selected: $persist('Dashboard')}">
|
|
<!-- Menu Group -->
|
|
<div>
|
|
<h3 class="mb-4 text-xs uppercase leading-[20px] text-gray-400">
|
|
<span
|
|
class="menu-group-title"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
MENU
|
|
</span>
|
|
|
|
<svg
|
|
:class="sidebarToggle ? 'lg:block hidden' : 'hidden'"
|
|
class="menu-group-icon mx-auto fill-current"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.99915 10.2451C6.96564 10.2451 7.74915 11.0286 7.74915 11.9951V12.0051C7.74915 12.9716 6.96564 13.7551 5.99915 13.7551C5.03265 13.7551 4.24915 12.9716 4.24915 12.0051V11.9951C4.24915 11.0286 5.03265 10.2451 5.99915 10.2451ZM17.9991 10.2451C18.9656 10.2451 19.7491 11.0286 19.7491 11.9951V12.0051C19.7491 12.9716 18.9656 13.7551 17.9991 13.7551C17.0326 13.7551 16.2491 12.9716 16.2491 12.0051V11.9951C16.2491 11.0286 17.0326 10.2451 17.9991 10.2451ZM13.7491 11.9951C13.7491 11.0286 12.9656 10.2451 11.9991 10.2451C11.0326 10.2451 10.2491 11.0286 10.2491 11.9951V12.0051C10.2491 12.9716 11.0326 13.7551 11.9991 13.7551C12.9656 13.7551 13.7491 12.9716 13.7491 12.0051V11.9951Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</h3>
|
|
|
|
<ul class="mb-6 flex flex-col gap-4">
|
|
<!-- Menu Item Dashboard -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Dashboard' ? '':'Dashboard')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Dashboard') || (page === 'ecommerce' || page === 'analytics' || page === 'marketing' || page === 'crm' || page === 'stocks') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Dashboard') || (page === 'ecommerce' || page === 'analytics' || page === 'marketing' || page === 'crm' || page === 'stocks') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V8.99998C3.25 10.2426 4.25736 11.25 5.5 11.25H9C10.2426 11.25 11.25 10.2426 11.25 8.99998V5.5C11.25 4.25736 10.2426 3.25 9 3.25H5.5ZM4.75 5.5C4.75 5.08579 5.08579 4.75 5.5 4.75H9C9.41421 4.75 9.75 5.08579 9.75 5.5V8.99998C9.75 9.41419 9.41421 9.74998 9 9.74998H5.5C5.08579 9.74998 4.75 9.41419 4.75 8.99998V5.5ZM5.5 12.75C4.25736 12.75 3.25 13.7574 3.25 15V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H9C10.2426 20.75 11.25 19.7427 11.25 18.5V15C11.25 13.7574 10.2426 12.75 9 12.75H5.5ZM4.75 15C4.75 14.5858 5.08579 14.25 5.5 14.25H9C9.41421 14.25 9.75 14.5858 9.75 15V18.5C9.75 18.9142 9.41421 19.25 9 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V15ZM12.75 5.5C12.75 4.25736 13.7574 3.25 15 3.25H18.5C19.7426 3.25 20.75 4.25736 20.75 5.5V8.99998C20.75 10.2426 19.7426 11.25 18.5 11.25H15C13.7574 11.25 12.75 10.2426 12.75 8.99998V5.5ZM15 4.75C14.5858 4.75 14.25 5.08579 14.25 5.5V8.99998C14.25 9.41419 14.5858 9.74998 15 9.74998H18.5C18.9142 9.74998 19.25 9.41419 19.25 8.99998V5.5C19.25 5.08579 18.9142 4.75 18.5 4.75H15ZM15 12.75C13.7574 12.75 12.75 13.7574 12.75 15V18.5C12.75 19.7426 13.7574 20.75 15 20.75H18.5C19.7426 20.75 20.75 19.7427 20.75 18.5V15C20.75 13.7574 19.7426 12.75 18.5 12.75H15ZM14.25 15C14.25 14.5858 14.5858 14.25 15 14.25H18.5C18.9142 14.25 19.25 14.5858 19.25 15V18.5C19.25 18.9142 18.9142 19.25 18.5 19.25H15C14.5858 19.25 14.25 18.9142 14.25 18.5V15Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Dashboard
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow"
|
|
:class="[(selected === 'Dashboard') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Dashboard') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="index.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'ecommerce' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
eCommerce
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="analytics.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'analytics' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Analytics
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'analytics' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="menu-dropdown-item group"
|
|
href="marketing.html"
|
|
:class="page === 'marketing' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Marketing
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'marketing' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="crm.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'crm' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
CRM
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'crm' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="stocks.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'stocks' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Stocks
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'stocks' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
New
|
|
</span>
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'stocks' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Dashboard -->
|
|
|
|
<!-- Menu Item Calendar -->
|
|
<li>
|
|
<a
|
|
href="calendar.html"
|
|
@click="selected = (selected === 'Calendar' ? '':'Calendar')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Calendar') && (page === 'calendar') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Calendar') && (page === 'calendar') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M8 2C8.41421 2 8.75 2.33579 8.75 2.75V3.75H15.25V2.75C15.25 2.33579 15.5858 2 16 2C16.4142 2 16.75 2.33579 16.75 2.75V3.75H18.5C19.7426 3.75 20.75 4.75736 20.75 6V9V19C20.75 20.2426 19.7426 21.25 18.5 21.25H5.5C4.25736 21.25 3.25 20.2426 3.25 19V9V6C3.25 4.75736 4.25736 3.75 5.5 3.75H7.25V2.75C7.25 2.33579 7.58579 2 8 2ZM8 5.25H5.5C5.08579 5.25 4.75 5.58579 4.75 6V8.25H19.25V6C19.25 5.58579 18.9142 5.25 18.5 5.25H16H8ZM19.25 9.75H4.75V19C4.75 19.4142 5.08579 19.75 5.5 19.75H18.5C18.9142 19.75 19.25 19.4142 19.25 19V9.75Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Calendar
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<!-- Menu Item Calendar -->
|
|
|
|
<!-- Menu Item Profile -->
|
|
<li>
|
|
<a
|
|
href="profile.html"
|
|
@click="selected = (selected === 'Profile' ? '':'Profile')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Profile') && (page === 'profile') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Profile') && (page === 'profile') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.1526 4.3002 16.1184 5.61936 17.616C6.17279 15.3096 8.24852 13.5955 10.7246 13.5955H13.2746C15.7509 13.5955 17.8268 15.31 18.38 17.6167C19.6996 16.119 20.5 14.153 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM17.0246 18.8566V18.8455C17.0246 16.7744 15.3457 15.0955 13.2746 15.0955H10.7246C8.65354 15.0955 6.97461 16.7744 6.97461 18.8455V18.856C8.38223 19.8895 10.1198 20.5 12 20.5C13.8798 20.5 15.6171 19.8898 17.0246 18.8566ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9991 7.25C10.8847 7.25 9.98126 8.15342 9.98126 9.26784C9.98126 10.3823 10.8847 11.2857 11.9991 11.2857C13.1135 11.2857 14.0169 10.3823 14.0169 9.26784C14.0169 8.15342 13.1135 7.25 11.9991 7.25ZM8.48126 9.26784C8.48126 7.32499 10.0563 5.75 11.9991 5.75C13.9419 5.75 15.5169 7.32499 15.5169 9.26784C15.5169 11.2107 13.9419 12.7857 11.9991 12.7857C10.0563 12.7857 8.48126 11.2107 8.48126 9.26784Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
User Profile
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<!-- Menu Item Profile -->
|
|
|
|
<!-- Menu Item Task -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Task' ? '':'Task')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Task') || (page === 'taskList' || page === 'taskKanban') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Task') || (page === 'taskList' || page === 'taskKanban') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M7.75586 5.50098C7.75586 5.08676 8.09165 4.75098 8.50586 4.75098H18.4985C18.9127 4.75098 19.2485 5.08676 19.2485 5.50098L19.2485 15.4956C19.2485 15.9098 18.9127 16.2456 18.4985 16.2456H8.50586C8.09165 16.2456 7.75586 15.9098 7.75586 15.4956V5.50098ZM8.50586 3.25098C7.26322 3.25098 6.25586 4.25834 6.25586 5.50098V6.26318H5.50195C4.25931 6.26318 3.25195 7.27054 3.25195 8.51318V18.4995C3.25195 19.7422 4.25931 20.7495 5.50195 20.7495H15.4883C16.7309 20.7495 17.7383 19.7421 17.7383 18.4995L17.7383 17.7456H18.4985C19.7411 17.7456 20.7485 16.7382 20.7485 15.4956L20.7485 5.50097C20.7485 4.25833 19.7411 3.25098 18.4985 3.25098H8.50586ZM16.2383 17.7456H8.50586C7.26322 17.7456 6.25586 16.7382 6.25586 15.4956V7.76318H5.50195C5.08774 7.76318 4.75195 8.09897 4.75195 8.51318V18.4995C4.75195 18.9137 5.08774 19.2495 5.50195 19.2495H15.4883C15.9025 19.2495 16.2383 18.9137 16.2383 18.4995L16.2383 17.7456Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Task
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow"
|
|
:class="[(selected === 'Task') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Task') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="task-list.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'taskList' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
List
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'taskList' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="task-kanban.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'taskKanban' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Kanban
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'taskKanban' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Task -->
|
|
|
|
<!-- Menu Item Forms -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Forms' ? '':'Forms')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Forms') || (page === 'formElements' || page === 'formLayout' || page === 'proFormElements' || page === 'proFormLayout') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Forms') || (page === 'formElements' || page === 'formLayout' || page === 'proFormElements' || page === 'proFormLayout') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H18.5001C19.7427 20.75 20.7501 19.7426 20.7501 18.5V5.5C20.7501 4.25736 19.7427 3.25 18.5001 3.25H5.5ZM4.75 5.5C4.75 5.08579 5.08579 4.75 5.5 4.75H18.5001C18.9143 4.75 19.2501 5.08579 19.2501 5.5V18.5C19.2501 18.9142 18.9143 19.25 18.5001 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V5.5ZM6.25005 9.7143C6.25005 9.30008 6.58583 8.9643 7.00005 8.9643L17 8.96429C17.4143 8.96429 17.75 9.30008 17.75 9.71429C17.75 10.1285 17.4143 10.4643 17 10.4643L7.00005 10.4643C6.58583 10.4643 6.25005 10.1285 6.25005 9.7143ZM6.25005 14.2857C6.25005 13.8715 6.58583 13.5357 7.00005 13.5357H17C17.4143 13.5357 17.75 13.8715 17.75 14.2857C17.75 14.6999 17.4143 15.0357 17 15.0357H7.00005C6.58583 15.0357 6.25005 14.6999 6.25005 14.2857Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Forms
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'Forms') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Forms') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="form-elements.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'formElements' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Form Elements
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="form-layout.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'formLayout' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Form Layout
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Forms -->
|
|
|
|
<!-- Menu Item Tables -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Tables' ? '':'Tables')"
|
|
class="menu-item group"
|
|
:class="(selected === 'Tables') || (page === 'basicTables' || page === 'dataTables') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Tables') || (page === 'basicTables' || page === 'dataTables') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M3.25 5.5C3.25 4.25736 4.25736 3.25 5.5 3.25H18.5C19.7426 3.25 20.75 4.25736 20.75 5.5V18.5C20.75 19.7426 19.7426 20.75 18.5 20.75H5.5C4.25736 20.75 3.25 19.7426 3.25 18.5V5.5ZM5.5 4.75C5.08579 4.75 4.75 5.08579 4.75 5.5V8.58325L19.25 8.58325V5.5C19.25 5.08579 18.9142 4.75 18.5 4.75H5.5ZM19.25 10.0833H15.416V13.9165H19.25V10.0833ZM13.916 10.0833L10.083 10.0833V13.9165L13.916 13.9165V10.0833ZM8.58301 10.0833H4.75V13.9165H8.58301V10.0833ZM4.75 18.5V15.4165H8.58301V19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5ZM10.083 19.25V15.4165L13.916 15.4165V19.25H10.083ZM15.416 19.25V15.4165H19.25V18.5C19.25 18.9142 18.9142 19.25 18.5 19.25H15.416Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Tables
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'Tables') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Tables') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="basic-tables.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'basicTables' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Basic Tables
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="data-tables.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'dataTables' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Data Tables
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'dataTables' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Tables -->
|
|
|
|
<!-- Menu Item Pages -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Pages' ? '':'Pages')"
|
|
class="menu-item group"
|
|
:class="(selected === 'Pages') || (page === 'fileManager' || page === 'pricingTables' || page === 'blank' || page === 'page404' || page === 'page500' || page === 'page503' || page === 'success' || page === 'faq' || page === 'comingSoon' || page === 'maintenance') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Pages') || (page === 'fileManager' || page === 'pricingTables' || page === 'blank' || page === 'page404' || page === 'page500' || page === 'page503' || page === 'success' || page === 'faq' || page === 'comingSoon' || page === 'maintenance') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M8.50391 4.25C8.50391 3.83579 8.83969 3.5 9.25391 3.5H15.2777C15.4766 3.5 15.6674 3.57902 15.8081 3.71967L18.2807 6.19234C18.4214 6.333 18.5004 6.52376 18.5004 6.72268V16.75C18.5004 17.1642 18.1646 17.5 17.7504 17.5H16.248V17.4993H14.748V17.5H9.25391C8.83969 17.5 8.50391 17.1642 8.50391 16.75V4.25ZM14.748 19H9.25391C8.01126 19 7.00391 17.9926 7.00391 16.75V6.49854H6.24805C5.83383 6.49854 5.49805 6.83432 5.49805 7.24854V19.75C5.49805 20.1642 5.83383 20.5 6.24805 20.5H13.998C14.4123 20.5 14.748 20.1642 14.748 19.75L14.748 19ZM7.00391 4.99854V4.25C7.00391 3.00736 8.01127 2 9.25391 2H15.2777C15.8745 2 16.4468 2.23705 16.8687 2.659L19.3414 5.13168C19.7634 5.55364 20.0004 6.12594 20.0004 6.72268V16.75C20.0004 17.9926 18.9931 19 17.7504 19H16.248L16.248 19.75C16.248 20.9926 15.2407 22 13.998 22H6.24805C5.00541 22 3.99805 20.9926 3.99805 19.75V7.24854C3.99805 6.00589 5.00541 4.99854 6.24805 4.99854H7.00391Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Pages
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'Pages') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Pages') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="file-manager.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'fileManager' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
File Manager
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'fileManager' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="pricing-tables.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'pricingTables' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Pricing Tables
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'pricingTables' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="faq.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'faq' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Faq's
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'faq' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="blank.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'blank' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Blank Page
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'blank' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="404.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'page404' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
404 Error
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'page404' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="500.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'page500' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
500 Error
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'page500' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="503.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'page503' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
503 Error
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'page503' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="coming-soon.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'comingSoon' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Coming Soon
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'comingSoon' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="maintenance.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'termsCondition' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Maintenance
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'termsCondition' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="success.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'success' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Success
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'success' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Pages -->
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Support Group -->
|
|
<div>
|
|
<h3 class="mb-4 text-xs uppercase leading-[20px] text-gray-400">
|
|
<span
|
|
class="menu-group-title"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Support
|
|
</span>
|
|
|
|
<svg
|
|
:class="sidebarToggle ? 'lg:block hidden' : 'hidden'"
|
|
class="menu-group-icon mx-auto fill-current"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.99915 10.2451C6.96564 10.2451 7.74915 11.0286 7.74915 11.9951V12.0051C7.74915 12.9716 6.96564 13.7551 5.99915 13.7551C5.03265 13.7551 4.24915 12.9716 4.24915 12.0051V11.9951C4.24915 11.0286 5.03265 10.2451 5.99915 10.2451ZM17.9991 10.2451C18.9656 10.2451 19.7491 11.0286 19.7491 11.9951V12.0051C19.7491 12.9716 18.9656 13.7551 17.9991 13.7551C17.0326 13.7551 16.2491 12.9716 16.2491 12.0051V11.9951C16.2491 11.0286 17.0326 10.2451 17.9991 10.2451ZM13.7491 11.9951C13.7491 11.0286 12.9656 10.2451 11.9991 10.2451C11.0326 10.2451 10.2491 11.0286 10.2491 11.9951V12.0051C10.2491 12.9716 11.0326 13.7551 11.9991 13.7551C12.9656 13.7551 13.7491 12.9716 13.7491 12.0051V11.9951Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</h3>
|
|
|
|
<ul class="mb-6 flex flex-col gap-4">
|
|
<!-- Menu Item Chat -->
|
|
<li>
|
|
<a
|
|
href="chat.html"
|
|
@click="selected = (selected === 'Chat' ? '':'Chat')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Chat') && (page === 'chat') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Chat') && (page === 'chat') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M4.00002 12.0957C4.00002 7.67742 7.58174 4.0957 12 4.0957C16.4183 4.0957 20 7.67742 20 12.0957C20 16.514 16.4183 20.0957 12 20.0957H5.06068L6.34317 18.8132C6.48382 18.6726 6.56284 18.4818 6.56284 18.2829C6.56284 18.084 6.48382 17.8932 6.34317 17.7526C4.89463 16.304 4.00002 14.305 4.00002 12.0957ZM12 2.5957C6.75332 2.5957 2.50002 6.849 2.50002 12.0957C2.50002 14.4488 3.35633 16.603 4.77303 18.262L2.71969 20.3154C2.50519 20.5299 2.44103 20.8525 2.55711 21.1327C2.6732 21.413 2.94668 21.5957 3.25002 21.5957H12C17.2467 21.5957 21.5 17.3424 21.5 12.0957C21.5 6.849 17.2467 2.5957 12 2.5957ZM7.62502 10.8467C6.93467 10.8467 6.37502 11.4063 6.37502 12.0967C6.37502 12.787 6.93467 13.3467 7.62502 13.3467H7.62512C8.31548 13.3467 8.87512 12.787 8.87512 12.0967C8.87512 11.4063 8.31548 10.8467 7.62512 10.8467H7.62502ZM10.75 12.0967C10.75 11.4063 11.3097 10.8467 12 10.8467H12.0001C12.6905 10.8467 13.2501 11.4063 13.2501 12.0967C13.2501 12.787 12.6905 13.3467 12.0001 13.3467H12C11.3097 13.3467 10.75 12.787 10.75 12.0967ZM16.375 10.8467C15.6847 10.8467 15.125 11.4063 15.125 12.0967C15.125 12.787 15.6847 13.3467 16.375 13.3467H16.3751C17.0655 13.3467 17.6251 12.787 17.6251 12.0967C17.6251 11.4063 17.0655 10.8467 16.3751 10.8467H16.375Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Chat
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<!-- Menu Item Chat -->
|
|
|
|
<!-- Menu Item Inbox -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Email' ? '':'Email')"
|
|
class="menu-item group"
|
|
:class="(selected === 'Email') || (page === 'inbox' || page === 'inboxDetails') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Email') || (page === 'inbox' || page === 'inboxDetails') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M3.5 8.187V17.25C3.5 17.6642 3.83579 18 4.25 18H19.75C20.1642 18 20.5 17.6642 20.5 17.25V8.18747L13.2873 13.2171C12.5141 13.7563 11.4866 13.7563 10.7134 13.2171L3.5 8.187ZM20.5 6.2286C20.5 6.23039 20.5 6.23218 20.5 6.23398V6.24336C20.4976 6.31753 20.4604 6.38643 20.3992 6.42905L12.4293 11.9867C12.1716 12.1664 11.8291 12.1664 11.5713 11.9867L3.60116 6.42885C3.538 6.38481 3.50035 6.31268 3.50032 6.23568C3.50028 6.10553 3.60577 6 3.73592 6H20.2644C20.3922 6 20.4963 6.10171 20.5 6.2286ZM22 6.25648V17.25C22 18.4926 20.9926 19.5 19.75 19.5H4.25C3.00736 19.5 2 18.4926 2 17.25V6.23398C2 6.22371 2.00021 6.2135 2.00061 6.20333C2.01781 5.25971 2.78812 4.5 3.73592 4.5H20.2644C21.2229 4.5 22 5.27697 22.0001 6.23549C22.0001 6.24249 22.0001 6.24949 22 6.25648Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Email
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'Email') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Email') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="inbox.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'inbox' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Inbox
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'inbox' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="inbox-details.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'inboxDetails' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Details
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'inboxDetails' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Inbox -->
|
|
|
|
<!-- Menu Item Invoice -->
|
|
<li>
|
|
<a
|
|
href="invoice.html"
|
|
@click="selected = (selected === 'Invoice' ? '':'Invoice')"
|
|
class="menu-item group"
|
|
:class=" (selected === 'Invoice') && (page === 'invoice') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Invoice') && (page === 'invoice') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M19.5 19.75C19.5 20.9926 18.4926 22 17.25 22H6.75C5.50736 22 4.5 20.9926 4.5 19.75V9.62105C4.5 9.02455 4.73686 8.45247 5.15851 8.03055L10.5262 2.65951C10.9482 2.23725 11.5207 2 12.1177 2H17.25C18.4926 2 19.5 3.00736 19.5 4.25V19.75ZM17.25 20.5C17.6642 20.5 18 20.1642 18 19.75V4.25C18 3.83579 17.6642 3.5 17.25 3.5H12.248L12.2509 7.49913C12.2518 8.7424 11.2442 9.75073 10.0009 9.75073H6V19.75C6 20.1642 6.33579 20.5 6.75 20.5H17.25ZM7.05913 8.25073L10.7488 4.55876L10.7509 7.5002C10.7512 7.91462 10.4153 8.25073 10.0009 8.25073H7.05913ZM8.25 14.5C8.25 14.0858 8.58579 13.75 9 13.75H15C15.4142 13.75 15.75 14.0858 15.75 14.5C15.75 14.9142 15.4142 15.25 15 15.25H9C8.58579 15.25 8.25 14.9142 8.25 14.5ZM8.25 17.5C8.25 17.0858 8.58579 16.75 9 16.75H12C12.4142 16.75 12.75 17.0858 12.75 17.5C12.75 17.9142 12.4142 18.25 12 18.25H9C8.58579 18.25 8.25 17.9142 8.25 17.5Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Invoice
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<!-- Menu Item Invoice -->
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Others Group -->
|
|
<div>
|
|
<h3 class="mb-4 text-xs uppercase leading-[20px] text-gray-400">
|
|
<span
|
|
class="menu-group-title"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
others
|
|
</span>
|
|
|
|
<svg
|
|
:class="sidebarToggle ? 'lg:block hidden' : 'hidden'"
|
|
class="menu-group-icon mx-auto fill-current"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.99915 10.2451C6.96564 10.2451 7.74915 11.0286 7.74915 11.9951V12.0051C7.74915 12.9716 6.96564 13.7551 5.99915 13.7551C5.03265 13.7551 4.24915 12.9716 4.24915 12.0051V11.9951C4.24915 11.0286 5.03265 10.2451 5.99915 10.2451ZM17.9991 10.2451C18.9656 10.2451 19.7491 11.0286 19.7491 11.9951V12.0051C19.7491 12.9716 18.9656 13.7551 17.9991 13.7551C17.0326 13.7551 16.2491 12.9716 16.2491 12.0051V11.9951C16.2491 11.0286 17.0326 10.2451 17.9991 10.2451ZM13.7491 11.9951C13.7491 11.0286 12.9656 10.2451 11.9991 10.2451C11.0326 10.2451 10.2491 11.0286 10.2491 11.9951V12.0051C10.2491 12.9716 11.0326 13.7551 11.9991 13.7551C12.9656 13.7551 13.7491 12.9716 13.7491 12.0051V11.9951Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
</h3>
|
|
|
|
<ul class="mb-6 flex flex-col gap-4">
|
|
<!-- Menu Item Charts -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Charts' ? '':'Charts')"
|
|
class="menu-item group"
|
|
:class="(selected === 'Charts') || (page === 'lineChart' || page === 'barChart' || page === 'pieChart') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Charts') || (page === 'lineChart' || page === 'barChart' || page === 'pieChart') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75V12C11.25 12.4142 11.5858 12.75 12 12.75H21.25C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2ZM12.75 11.25V3.53263C13.2645 3.57761 13.7659 3.66843 14.25 3.80098V3.80099C15.6929 4.19606 16.9827 4.96184 18.0104 5.98959C19.0382 7.01734 19.8039 8.30707 20.199 9.75C20.3316 10.2341 20.4224 10.7355 20.4674 11.25H12.75ZM2 12C2 7.25083 5.31065 3.27489 9.75 2.25415V3.80099C6.14748 4.78734 3.5 8.0845 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C15.9155 20.5 19.2127 17.8525 20.199 14.25H21.7459C20.7251 18.6894 16.7492 22 12 22C6.47715 22 2 17.5229 2 12Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Charts
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'Charts') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Charts') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="line-chart.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'lineChart' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Line Chart
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'lineChart' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="bar-chart.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'barChart' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Bar Chart
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'barChart' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="pie-chart.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'pieChart' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Pie Chart
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'pieChart' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Charts -->
|
|
|
|
<!-- Menu Item Ui Elements -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'UiElements' ? '':'UiElements')"
|
|
class="menu-item group"
|
|
:class="(selected === 'UiElements') || (page === 'alerts' || page === 'avatars' || page === 'badge' || page === 'breadcrumb' || page === 'buttons' || page === 'buttonsGroup' || page === 'cards'|| page === 'carousel' || page === 'dropdowns' || page === 'images' || page === 'list' || page === 'modals' || page === 'notifications' || page === 'pagination' || page === 'popovers' || page === 'progress' || page === 'spinners' || page === 'tooltips' || page === 'videos') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'UiElements') || (page === 'alerts' || page === 'avatars' || page === 'badge' || page === 'breadcrumb' || page === 'buttons' || page === 'buttonsGroup' || page === 'cards'|| page === 'carousel' || page === 'dropdowns' || page === 'images' || page === 'list' || page === 'modals' || page === 'notifications' || page === 'pagination' || page === 'popovers' || page === 'progress' || page === 'spinners' || page === 'tooltips' || page === 'videos') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M11.665 3.75618C11.8762 3.65061 12.1247 3.65061 12.3358 3.75618L18.7807 6.97853L12.3358 10.2009C12.1247 10.3064 11.8762 10.3064 11.665 10.2009L5.22014 6.97853L11.665 3.75618ZM4.29297 8.19199V16.0946C4.29297 16.3787 4.45347 16.6384 4.70757 16.7654L11.25 20.0365V11.6512C11.1631 11.6205 11.0777 11.5843 10.9942 11.5425L4.29297 8.19199ZM12.75 20.037L19.2933 16.7654C19.5474 16.6384 19.7079 16.3787 19.7079 16.0946V8.19199L13.0066 11.5425C12.9229 11.5844 12.8372 11.6207 12.75 11.6515V20.037ZM13.0066 2.41453C12.3732 2.09783 11.6277 2.09783 10.9942 2.41453L4.03676 5.89316C3.27449 6.27429 2.79297 7.05339 2.79297 7.90563V16.0946C2.79297 16.9468 3.27448 17.7259 4.03676 18.1071L10.9942 21.5857L11.3296 20.9149L10.9942 21.5857C11.6277 21.9024 12.3732 21.9024 13.0066 21.5857L19.9641 18.1071C20.7264 17.7259 21.2079 16.9468 21.2079 16.0946V7.90563C21.2079 7.05339 20.7264 6.27429 19.9641 5.89316L13.0066 2.41453Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Ui Elements
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'UiElements') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'UiElements') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="alerts.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'alerts' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Alerts
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'alerts' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="buttons.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'buttons' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Buttons
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'buttons' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="images.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'images' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Images
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'images' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="pagination.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'pagination' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Pagination
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'pagination' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Ui Elements -->
|
|
|
|
<!-- Menu Item Authentication -->
|
|
<li>
|
|
<a
|
|
href="#"
|
|
@click.prevent="selected = (selected === 'Authentication' ? '':'Authentication')"
|
|
class="menu-item group"
|
|
:class="(selected === 'Authentication') || (page === 'basicChart' || page === 'advancedChart') ? 'menu-item-active' : 'menu-item-inactive'"
|
|
>
|
|
<svg
|
|
:class="(selected === 'Authentication') || (page === 'basicChart' || page === 'advancedChart') ? 'menu-item-icon-active' :'menu-item-icon-inactive'"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M14 2.75C14 2.33579 14.3358 2 14.75 2C15.1642 2 15.5 2.33579 15.5 2.75V5.73291L17.75 5.73291H19C19.4142 5.73291 19.75 6.0687 19.75 6.48291C19.75 6.89712 19.4142 7.23291 19 7.23291H18.5L18.5 12.2329C18.5 15.5691 15.9866 18.3183 12.75 18.6901V21.25C12.75 21.6642 12.4142 22 12 22C11.5858 22 11.25 21.6642 11.25 21.25V18.6901C8.01342 18.3183 5.5 15.5691 5.5 12.2329L5.5 7.23291H5C4.58579 7.23291 4.25 6.89712 4.25 6.48291C4.25 6.0687 4.58579 5.73291 5 5.73291L6.25 5.73291L8.5 5.73291L8.5 2.75C8.5 2.33579 8.83579 2 9.25 2C9.66421 2 10 2.33579 10 2.75L10 5.73291L14 5.73291V2.75ZM7 7.23291L7 12.2329C7 14.9943 9.23858 17.2329 12 17.2329C14.7614 17.2329 17 14.9943 17 12.2329L17 7.23291L7 7.23291Z"
|
|
fill=""
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
class="menu-item-text"
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
>
|
|
Authentication
|
|
</span>
|
|
|
|
<svg
|
|
class="menu-item-arrow absolute right-2.5 top-1/2 -translate-y-1/2 stroke-current"
|
|
:class="[(selected === 'Authentication') ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '' ]"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585"
|
|
stroke=""
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Dropdown Menu Start -->
|
|
<div
|
|
class="translate transform overflow-hidden"
|
|
:class="(selected === 'Authentication') ? 'block' :'hidden'"
|
|
>
|
|
<ul
|
|
:class="sidebarToggle ? 'lg:hidden' : 'flex'"
|
|
class="menu-dropdown mt-2 flex flex-col gap-1 pl-9"
|
|
>
|
|
<li>
|
|
<a
|
|
href="signin.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'signin' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Sign In
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="signup.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'signup' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Sign Up
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="advanced-chart.html"
|
|
class="menu-dropdown-item group"
|
|
:class="page === 'advancedChart' ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive'"
|
|
>
|
|
Advanced Chart
|
|
<span class="absolute right-3 flex items-center gap-1">
|
|
<span
|
|
class="menu-dropdown-badge"
|
|
:class="page === 'advancedChart' ? 'menu-dropdown-badge-active' : 'menu-dropdown-badge-inactive'"
|
|
>
|
|
Pro
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Dropdown Menu End -->
|
|
</li>
|
|
<!-- Menu Item Authentication -->
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- Sidebar Menu -->
|
|
|
|
<!-- Promo Box -->
|
|
<div
|
|
:class="sidebarToggle ? 'lg:hidden' : ''"
|
|
class="mx-auto mb-10 w-full max-w-60 rounded-2xl bg-gray-50 px-4 py-5 text-center dark:bg-white/[0.03]"
|
|
>
|
|
<h3 class="mb-2 font-semibold text-gray-900 dark:text-white">
|
|
TailAdmin Pro
|
|
</h3>
|
|
<p class="mb-4 text-theme-sm text-gray-500 dark:text-gray-400">
|
|
Get All Dashboards and 300+ UI Elements
|
|
</p>
|
|
<a
|
|
href="https://tailadmin.com/pricing"
|
|
target="_blank"
|
|
rel="nofollow"
|
|
class="flex items-center justify-center rounded-lg bg-brand-500 p-3 text-theme-sm font-medium text-white hover:bg-brand-600"
|
|
>
|
|
Upgrade Plan
|
|
</a>
|
|
</div>
|
|
<!-- Promo Box -->
|
|
</div>
|
|
</aside>
|