List Item
<!-- List item -->
<div class="flex flex-col gap-4 w-72 mb-8">
<!-- item -->
<a href="#" class="active">
<div class="flex items-center 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 items-center 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 items-center justify-center rounded-full 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 items-center 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 flex-col 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 flex-row items-center gap-3 py-3 pl-4 pr-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 items-center py-3 pl-8 pr-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 items-center py-3 pl-8 pr-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 items-center py-3 pl-8 pr-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 flex-col gap-3 w-20 rounded-lg mb-8">
<!-- item -->
<a href="#" class="group min-h-[56px] flex flex-col items-center justify-center 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 items-center justify-center 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 flex-col items-center justify-center 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 items-center justify-center rounded-2xl">
<i class="bi bi-layers"></i>
<div class="absolute -top-0.5 left-8 min-w-[22px] px-1 h-4 flex items-center justify-center rounded-full 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 flex-col items-center justify-center 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 items-center justify-center 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 flex-col items-center justify-center 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 items-center justify-center rounded-2xl">
<i class="bi bi-layers"></i>
</div>
<p class="text-xs tracking-[.0416em] leading-tight">Logout</p>
</a>
</div>