Sidebar Component
A responsive sidebar component designed for e-commerce applications with Material Design elements and a pastel color scheme, featuring dark mode support.
HTML Code
<aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
<div class="flex items-center mb-5">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
</div>
<nav>
<ul>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
</li>
<li>
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
</li>
</ul>
</nav>
<div class="mt-5">
<h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
<div class="mt-3">
<img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
<img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
</div>
</div>
</aside>Related Components
Sidebar Component
A complex, responsive, Glassmorphism-styled sidebar component for a dashboard, featuring earth tones and dark mode support.
Sidebar Component
A responsive sidebar component designed in a retro/vintage style with vibrant colors for a dashboard layout. It includes support for dark mode.
Sidebar Component
A Sidebar Component designed with a skeuomorphic style that provides a real-world feel in a digital format. It supports responsive design and a dark theme.