Composant de la barre latérale
Un composant de barre latérale réactif conçu pour les applications de commerce électronique avec des éléments de conception matérielle et une palette de couleurs pastel, avec prise en charge du mode sombre.
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>Composants associés
Composant de la barre latérale
Un composant de barre latérale complexe, réactif, de style Glassmorphism pour un tableau de bord, avec des tons de terre et la prise en charge du mode sombre.
Glassmorphism Sidebar avec mode sombre
Un composant de barre latérale réactif avec un design glassmorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, le nom du site, des liens de navigation et une section de profil utilisateur.
Barre latérale de blog simple et dynamique
Un composant de barre latérale simple et réactif pour le contenu du blog, conçu avec des couleurs vives et une sensation de matériau à l’aide de Tailwind CSS. Comprend des liens de navigation et une section de profil utilisateur. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Fixé sur les grands écrans, caché sur les petits écrans.