Componente della barra laterale
Un componente della barra laterale progettato con uno stile scheumorfico che offre una sensazione del mondo reale in un formato digitale. Supporta un design reattivo e un tema scuro.
Codice HTML
<div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
<div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
</div>
<div class="flex-grow overflow-y-auto p-4">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<span>Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Settings</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Messages</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>Componenti correlati
Componente della barra laterale
Un componente della barra laterale reattivo progettato in uno stile retrò/vintage con colori vivaci per un layout del cruscotto. Include il supporto per la modalità oscura.
Barra laterale Glassmorphism con modalità scura
Un componente della barra laterale reattiva con design glassmorphism e supporto per la modalità oscura utilizzando Tailwind CSS. Include un logo, il nome del sito, i link di navigazione e la sezione del profilo utente.
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.