Componente del menu dell'hamburger
Un componente del menu dell'hamburger scheumorfico per una dashboard con una combinazione di colori pastello e un design minimalista.
Codice HTML
<div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
</div>
<button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<div class="hamburger">
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
</div>
</button>
</div>
<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
<ul class="space-y-2">
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">User Profile</span>
</li>
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">Settings</span>
</li>
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">Logout</span>
</li>
</ul>
</div>
<style>
.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>Componenti correlati
Componente del menu dell'hamburger
Un componente del menu dell'hamburger reattivo progettato con uno stile 3D, adatto per scopi di dashboard. Incorpora una combinazione di colori triadici e ha un'interfaccia complessa con elementi interattivi, che supportano sia temi chiari che scuri.
Componente del menu dell'hamburger
Un componente del menu dell'hamburger reattivo progettato per l'uso nella dashboard, disegnato in un design 3D con una combinazione di colori in scala di grigi, adatto sia per temi chiari che scuri.
Componente del menu dell'hamburger 19
Un componente scheletrico del menu dell'hamburger progettato in stile scheumorfico, che imita gli elementi del mondo reale. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.