Composant de la barre latérale
Un composant de barre latérale réactif et minimaliste pour le commerce électronique, avec prise en charge du mode sombre. Il présente une mise en page simple avec des catégories de produits et une icône de panier.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
<div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
<nav>
<ul class="space-y-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
</ul>
</nav>
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
Shopping Cart
</a>
</div>
</div>
<!-- Main content area (for context) -->
<div class="flex-1 p-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
<p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
</div>
</div>Composants associés
Composant de la barre latérale de crypto-monnaie
Un composant de barre latérale complexe et réactif conçu pour les applications de crypto-monnaie et de blockchain, avec des principes de conception matérielle avec une palette de couleurs sourdes et une prise en charge complète du mode sombre.
Composant de la barre latérale
Un composant de barre latérale réactif pour présenter des éléments de portefeuille avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.
Composant de la barre latérale des soins de santé
Un composant de barre latérale complexe, minimaliste et réactif pour les applications de santé, doté d’une palette de couleurs analogue et d’une prise en charge du mode sombre. Comprend la navigation, le profil de l’utilisateur et les liens rapides.