Componente della barra laterale
Un componente della barra laterale reattivo e minimalista per l'e-commerce, con supporto per la modalità scura. Presenta un layout semplice con categorie di prodotti e un'icona del carrello della spesa.
Codice HTML
<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>Componenti correlati
Componente della barra laterale
Un componente della barra laterale complesso, reattivo, in stile Glassmorphism per un cruscotto, con toni della terra e supporto per la modalità scura.
Consulting_Sidebar_Dark_Candy_Complex
Un componente della barra laterale complesso e reattivo per consulenze/servizi, caratterizzato da un'interfaccia utente in modalità scura con accenti di colore caramelle/dolci. Include la navigazione, il profilo utente e i collegamenti rapidi.
Componente della barra laterale
Un componente della barra laterale reattivo per un portfolio, caratterizzato da uno stile di progettazione 3D con un tema scuro, adatto per mostrare lavori o prodotti, con alcuni elementi interattivi e una combinazione di colori analoga.