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.
Codice HTML
<div class="flex h-screen bg-stone-100 dark:bg-stone-900">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-4 shadow-lg md:flex">
<div class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-6">Dashboard</div>
<nav class="flex-1 space-y-2">
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
<svg class="h-5 w-5" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l-7 7m7-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-3m-6 0h6"></path></svg>
<span>Home</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
<svg class="h-5 w-5" 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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h3m-3 0h-3"></path></svg>
<span>Analytics</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
<svg class="h-5 w-5" 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="M12 4.354a4 4 0 110 5.292M12 20.354a4 4 0 110-5.292M12 14.354a4 4 0 110 5.292M12 8.354a4 4 0 110 5.292"></path></svg>
<span>Reports</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
<svg class="h-5 w-5" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
<span>Users</span>
</a>
</nav>
<div class="mt-6 flex items-center space-x-3 p-3 rounded-lg bg-white/40 dark:bg-stone-700/40">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<p class="font-medium text-stone-800 dark:text-stone-100">John Doe</p>
<a href="#" class="text-sm text-stone-600 dark:text-stone-300 hover:underline">View Profile</a>
</div>
</div>
</div>
<!-- Main Content (for demonstration purposes) -->
<div class="flex-1 p-8 overflow-y-auto">
<h1 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-6">Dashboard Overview</h1>
<p class="text-stone-700 dark:text-stone-200">This is the main content area. The sidebar is a Glassmorphism-styled component with earth tones and dark mode support.</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 1</h2>
<p class="text-stone-700 dark:text-stone-200">Some content for card 1. This demonstrates a typical content area next to the sidebar.</p>
</div>
<div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 2</h2>
<p class="text-stone-700 dark:text-stone-200">More content for card 2. The design uses natural colors and provides a rich interface.</p>
</div>
<div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 3</h2>
<p class="text-stone-700 dark:text-stone-200">Final card content. The responsive design adapts to different screen sizes.</p>
</div>
</div>
</div>
</div>Componenti correlati
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.
Componente della barra laterale
Un componente della barra laterale reattivo progettato per applicazioni di e-commerce con elementi di Material Design e una combinazione di colori pastello, con supporto per la modalità scura.
Componente della barra laterale del neumorfismo
Un componente della barra laterale reattivo con design a neumorfismo, combinazione di colori dei toni della terra e complessità semplice, adatto per blog o consumo di contenuti. Include il supporto per la modalità oscura.