Tailwind CSS Sidebar - Nuanxa
Komponen sidebar responsif yang dibangun dengan Tailwind CSS, cocok untuk navigasi dalam aplikasi web Anda.
Default sidebar
Komponen sidebar responsif yang dibangun dengan Tailwind CSS, cocok untuk navigasi dalam aplikasi web Anda.
<aside
id="sidebar"
class="fixed inset-y-0 w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-md shadow-blue-200 dark:shadow-gray-700 z-30 transform transition-transform duration-500 ease-in-out -translate-x-[120%] sm:translate-x-0"
>
<div class="flex items-center justify-between p-4">
<a href="#" class="flex items-center gap-1">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
<span class="uppercase font-extrabold text-xl tracking-widest">WLIX</span>
</a>
<button
id="buttonClose"
class="sm:hidden text-gray-400 hover:text-gray-w-2800 dark:hover:text-gray-300"
>
<i class="fas fa-times"></i>
</button>
</div>
<hr class="border border-gray-300 dark:border-gray-700 mx-4" />
<nav
class="p-2 text-sm font-normal overflow-y-auto scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-transparent dark:scrollbar-thumb-gray-400 h-[calc(100%-120px)]"
>
<ul class="space-y-2">
<!-- Dashboard -->
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-laptop text-sm"></i>
<span>Dashboard</span>
</a>
</li>
<!-- AUTH -->
<li class="pt-3 ms-2">
<span
class="text-gray-500 dark:text-gray-400 text-xs font-semibold tracking-wide"
>
AUTH
</span>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-sign-in-alt text-sm"></i>
<span>Login</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-user-plus text-sm"></i>
<span>Register</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-lock-open text-sm"></i>
<span>Forgot Password</span>
</a>
</li>
</ul>
</nav>
</aside>
Sidebar with collapse
Komponen sidebar dengan fitur collapse yang memungkinkan pengguna membuka dan menutup bagian untuk organisasi yang lebih baik.
<aside
id="sidebar"
class="fixed inset-y-0 w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-md shadow-blue-200 dark:shadow-gray-700 z-30 transform transition-transform duration-500 ease-in-out -translate-x-[120%] sm:translate-x-0"
>
<div class="flex items-center justify-between p-4">
<a href="#" class="flex items-center gap-1">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-24 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-24 dark:hidden block"
alt="Logo Light"
/>
<span class="uppercase font-extrabold text-xl tracking-widest">WLIX</span>
</a>
<button
id="buttonClose"
class="sm:hidden text-gray-400 hover:text-gray-w-2800 dark:hover:text-gray-300"
>
<i class="fas fa-times"></i>
</button>
</div>
<hr class="border border-gray-300 dark:border-gray-700 mx-4" />
<nav
class="p-2 text-sm font-normal overflow-y-auto scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-transparent dark:scrollbar-thumb-gray-400 h-[calc(100%-120px)]"
>
<ul class="space-y-2">
<!-- Dashboard -->
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-laptop text-sm"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Billing -->
<li class="collapse-group expand">
<button
class="collapse-toggle w-full flex justify-between items-center p-2 rounded-lg"
>
<span class="flex items-center gap-2">
<i class="fas fa-file-invoice-dollar text-sm"></i>
<span>Billing</span>
</span>
<i
class="fas fa-chevron-right collapse-arrow transform transition-transform duration-150 text-xs"
></i>
</button>
<ul
class="collapse-content overflow-hidden transition-all duration-150 ease-in-out space-y-1 bg-blue-100 dark:bg-gray-600 rounded-md m-1"
style="max-height: 0"
>
<li class="px-2 pt-2">
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-file-invoice text-sm"></i>
<span>Invoices</span>
</a>
</li>
<li class="px-2">
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-credit-card text-sm"></i>
<span>Payments</span>
</a>
</li>
<li class="px-2 pb-2">
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-receipt text-sm"></i>
<span>Taxes</span>
</a>
</li>
</ul>
</li>
<!-- AUTH -->
<li class="pt-3 ms-2">
<span
class="text-gray-500 dark:text-gray-400 text-xs font-semibold tracking-wide"
>
AUTH
</span>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-sign-in-alt text-sm"></i>
<span>Login</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-user-plus text-sm"></i>
<span>Register</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-lock-open text-sm"></i>
<span>Forgot Password</span>
</a>
</li>
</ul>
</nav>
</aside>
Sidebar with navbar
Komponen sidebar dengan navbar yang memberikan pengalaman navigasi yang lebih mulus.
<!-- Navbar -->
<nav
class="sm:ml-64 sticky bg-white dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-sm shadow-blue-200 dark:shadow-gray-700 py-2 px-4 flex justify-between"
>
<div>
<h6 class="text-gray-500 text-sm">Pages / Sidebar</h6>
<h2 class="font-bold text-lg">Sidebar</h2>
</div>
<div class="flex items-center gap-2 pt-4 md:pt-0">
<!-- DROPDOWN PROFILE -->
<div class="relative inline-block text-left">
<!-- button triger -->
<button data-dropdown-toggle="dropdown-profile">
<div
class="flex size-8 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-600 overflow-hidden"
>
<span class="font-medium text-gray-700 dark:text-gray-300 p-2">
DF
</span>
</div>
</button>
<!-- Dropdown profile -->
<div
id="dropdown-profile"
class="dropdown-menu hidden absolute mt-2 right-0 w-40 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-20"
>
<a
href="#profile"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-user"></i> My Profile
</a>
<a
href="#settings"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-cog"></i> Settings
</a>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-sign-out-alt"></i> Logout
</button>
</form>
</div>
</div>
<button
id="toggleSidebar"
class="md:hidden hover: dark:hover:text-gray-300 transition"
>
<i id="toggleIcon" class="fa-solid fa-bars"></i>
</button>
</div>
</nav>
<!-- Sidebar -->
<aside
id="sidebar"
class="fixed inset-y-0 w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-md shadow-blue-200 dark:shadow-gray-700 z-30 transform transition-transform duration-500 ease-in-out -translate-x-[120%] sm:translate-x-0"
>
<div class="flex items-center justify-between p-4">
<a href="#" class="flex items-center gap-1">
<img
src="../../../assets/img/logo/owlix-dark.png"
class="w-7 hidden dark:block"
alt="Logo Dark"
/>
<img
src="../../../assets/img/logo/owlix-light.png"
class="w-7 dark:hidden block"
alt="Logo Light"
/>
<span class="uppercase font-extrabold text-xl tracking-widest">WLIX</span>
</a>
<button
id="buttonClose"
class="sm:hidden text-gray-400 hover:text-gray-w-2800 dark:hover:text-gray-300"
>
<i class="fas fa-times"></i>
</button>
</div>
<hr class="border border-gray-300 dark:border-gray-700 mx-4" />
<nav
class="p-2 text-sm font-normal overflow-y-auto scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-transparent dark:scrollbar-thumb-gray-400 h-[calc(100%-120px)]"
>
<ul class="space-y-2">
<!-- Dashboard -->
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-laptop text-sm"></i>
<span>Dashboard</span>
</a>
</li>
<!-- AUTH -->
<li class="pt-3 ms-2">
<span
class="text-gray-500 dark:text-gray-400 text-xs font-semibold tracking-wide"
>
AUTH
</span>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-sign-in-alt text-sm"></i>
<span>Login</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-user-plus text-sm"></i>
<span>Register</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center gap-2 p-2 rounded-lg hover:bg-blue-200 dark:hover:bg-gray-700 w-full"
>
<i class="fas fa-lock-open text-sm"></i>
<span>Forgot Password</span>
</a>
</li>
</ul>
</nav>
</aside>