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>