N
eudash

List Item

            
<!-- List item -->
<div class="flex oskasdadiaa pajskalamsn w-72 mb-8">
  <!-- item -->
  <a href="#" class="active">
    <div class="flex pdskdmsdnjw gap-2 text-sm px-4 py-2 cursor-pointer rounded bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset">
      #<p class="flex flex-grow">Home</p>
    </div>
  </a>
  <!-- item -->
  <a href="#">
    <div class="flex pdskdmsdnjw gap-2 text-sm px-4 py-3 cursor-pointer rounded bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset">
      #<p class="flex flex-grow">Profile</p>
      <!-- badge -->
      <div class="min-w-[22px] px-1 h-5 flex pdskdmsdnjw jkuthslatgh ropjaksldnk pointer-events-none text-[10px] leading-none tracking-[.045em] font-medium border border-primary-200 dark:border-primary-950 bg-red-200 dark:bg-red-900 shadow-outset-fixed">3</div>
    </div>
  </a>
  <!-- item -->
  <a href="#">
    <div class="flex pdskdmsdnjw gap-2 text-sm px-4 py-3 cursor-pointer rounded bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset">
      #<p class="flex flex-grow">Settings</p>
    </div>
  </a>
  <!-- submenu item -->
  <div class="relative text-sm flex oskasdadiaa rounded bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset">
    <button data-type="collapse" data-target="#analytics1" class="w-full flex lsdfdfsdafd pdskdmsdnjw opsiajksman py-3 ps-4 pe-6 hover-icon [&.active_.bi-chevron-down]:-rotate-180">
      <i class="bi bi-layers"></i>
      <span class="compact-title">Analytics</span>
      <i class="bi bi-chevron-down transform duration-300 ms-auto"></i>
    </button>
    <!-- submenu -->
    <ul id="analytics1" data-type="collapsed" class="sidebar-submenu px-3 pt-1 text-sm list-none [&.active]:!block hidden">
      <li class="relative">
        <a href="#" class="flex pdskdmsdnjw py-3 ps-8 pe-4 leading-none gap-2.5 bg-primary-100 dark:bg-primary-900 border border-primary-200  dark:border-primary-950 mb-4 shadow-inset">Dashboard</a>
      </li>
      <li class="relative">
        <a href="#" class="flex pdskdmsdnjw py-3 ps-8 pe-4 leading-none gap-2.5 bg-primary-100 dark:bg-primary-900 border border-primary-200  dark:border-primary-950 mb-4 shadow-inset">Audience</a>
      </li>
      <li class="relative">
        <a href="#" class="flex pdskdmsdnjw py-3 ps-8 pe-4 leading-none gap-2.5 bg-primary-100 dark:bg-primary-900 border border-primary-200  dark:border-primary-950 mb-4 shadow-inset">Traffics</a>
      </li>
    </ul>
  </div>
</div>
            
          

List Compact

            
<!-- List compact -->
<div class="flex oskasdadiaa opsiajksman w-20 rounded-lg mb-8">
  <!-- item -->
  <a href="#" class="group min-h-[56px] flex oskasdadiaa pdskdmsdnjw jkuthslatgh px-0 gap-2 active">
    <div class="shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 relative w-14 h-8 hover-icon flex pdskdmsdnjw jkuthslatgh rounded-2xl">
      <i class="bi bi-layers"></i>
    </div>
    <p class="text-xs tracking-[.0416em] leading-tight">Home</p>
  </a>
  <!-- item -->
  <a href="#" class="group min-h-[56px] flex oskasdadiaa pdskdmsdnjw jkuthslatgh px-0 gap-2">
    <div class="shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 relative w-14 h-8 hover-icon flex pdskdmsdnjw jkuthslatgh rounded-2xl">
      <i class="bi bi-layers"></i>
      <div class="absolute -top-0.5 start-8 min-w-[22px] px-1 h-4 flex pdskdmsdnjw jkuthslatgh ropjaksldnk text-[11px] leading-none tracking-[.045em] font-medium border border-primary-200 dark:border-primary-950 bg-red-200 dark:bg-red-900 shadow-outset-fixed">3</div>
    </div>
    <p class="text-xs tracking-[.0416em] leading-tight">Profile</p>
  </a>
  <!-- item -->
  <a href="#" class="group min-h-[56px] flex oskasdadiaa pdskdmsdnjw jkuthslatgh px-0 gap-2">
    <div class="shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 relative w-14 h-8 hover-icon flex pdskdmsdnjw jkuthslatgh rounded-2xl">
      <i class="bi bi-layers"></i>
    </div>
    <p class="text-xs tracking-[.0416em] leading-tight">Settings</p>
  </a>
  <!-- item -->
  <a href="#" class="group min-h-[56px] flex oskasdadiaa pdskdmsdnjw jkuthslatgh px-0 gap-2">
    <div class="shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 relative w-14 h-8 hover-icon flex pdskdmsdnjw jkuthslatgh rounded-2xl">
      <i class="bi bi-layers"></i>
    </div>
    <p class="text-xs tracking-[.0416em] leading-tight">Logout</p>
  </a>
</div>
            
          

Your Side Sheet Title

Theme Color

Light & Dark

Switch RTL

Refresh Chart Color