Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale complesso e reattivo con una combinazione di colori triadica e transizioni sfumate, progettato per un'interfaccia dashboard. Include il supporto per la modalità oscura e più elementi interattivi.
Codice HTML
<div class="flex h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-500">
<!-- Sidebar -->
<div class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 shadow-xl transform transition-transform duration-300 md:relative md:translate-x-0 overflow-y-auto z-40"
x-data="{ open: false }"
@keydown.escape.window="open = false"
:class="{'translate-x-0 ease-out': open, '-translate-x-full ease-in': !open}">
<!-- Sidebar Header -->
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
<a href="#" class="flex items-center space-x-3">
<svg class="h-8 w-8 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<span class="text-2xl font-bold tracking-wider">Dashboard</span>
</a>
<button class="md:hidden focus:outline-none" @click="open = false">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Sidebar Navigation Links -->
<nav class="mt-6">
<ul>
<li class="relative px-6 py-3">
<span class="absolute inset-y-0 left-0 w-1 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out text-blue-600 dark:text-blue-400" href="#">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6-4h4" />
</svg>
<span>Overview</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<span>Analytics</span>
</a>
</li>
<li class="relative px-6 py-3" x-data="{ open: false }">
<button @click="open = !open" class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
<span class="inline-flex items-center">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1.414M14 9l2 2m0 0l2-2m-2-2v4m-6 3H6m6 0h.01M6 15h2m-2 2h2m0 0h.01M10 20v-6a2 2 0 012-2h.01M12 9l2-2m0 0l2 2m-2-2v4m-3 10V6a2 2 0 012-2h2a2 2 0 012 2v14M8 5a2 2 0 012-2h2a2 2 0 012 2v14" />
</svg>
<span>Reports</span>
</span>
<svg class="h-4 w-4 transform transition-transform duration-200" :class="{'rotate-90': open}" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
<ul x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner">
<li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
<a class="w-full" href="#">Daily Reports</a>
</li>
<li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
<a class="w-full" href="#">Weekly Reports</a>
</li>
<li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
<a class="w-full" href="#">Monthly Reports</a>
</li>
</ul>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354l.707-.707A4 4 0 0117 4.5v16.146a.5.5 0 01-.854.354L12 18.5l-4.146 2.5A.5.5 0 017 20.646V4.5a4 4 0 013.293-3.854L12 4.354z" />
</svg>
<span>Projects</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2V7a4 4 0 00-4-4H7a4 4 0 00-4 4v10a2 2 0 002 2h4m3 0l-3 3v-3m0 0h8m-10 6L9 14l5-5 5 5" />
</svg>
<span>Tasks</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<span>Users</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer (User Info) -->
<div class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-full object-cover ring-2 ring-blue-500 dark:ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
<button class="p-2 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md transition-colors duration-200 hover:text-red-600 dark:hover:text-red-400">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
</button>
</div>
</div>
</div>
<!-- Overlay for mobile when sidebar is open -->
<div class="fixed inset-0 bg-black opacity-50 z-30 md:hidden" x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-50" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-50" x-transition:leave-end="opacity-0" @click="open = false"></div>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Bar / Navbar -->
<header class="flex justify-between items-center px-6 py-4 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 z-20">
<div class="flex items-center">
<button class="md:hidden text-gray-500 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100 dark:text-gray-400" @click="open = true">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<h1 class="ml-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">Overview</h1>
</div>
<div class="flex items-center space-x-4">
<!-- Search Bar -->
<div class="relative hidden md:block">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input class="block w-full rounded-md border-gray-300 pl-10 pr-4 py-2 text-gray-900 placeholder-gray-500 ring-1 ring-gray-300 dark:ring-gray-600 focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-gray-100 dark:bg-gray-700 dark:text-gray-100" placeholder="Search..." type="search">
</div>
<!-- Settings Dropdown -->
<div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:text-gray-900 transition-colors duration-200">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
<div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md shadow-lg py-1 z-50">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Logout</a>
</div>
</div>
<!-- Dark Mode Toggle -->
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.288a1 1 0 00.757 1.637l.95-.316A1 1 0 0018 15v-1a1 1 0 00-.757-.966l-.95-.316a1 1 0 00-.671 1.344zM16 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm-4.288 4.459a1 1 0 00-1.637.757l-.316.95A1 1 0 0010 18h1a1 1 0 00.966-.757l.316-.95a1 1 0 00-1.344-.671zM10.5 16a.5.5 0 01-.5.5v1a.5.5 0 011 0v-1a.5.5 0 01-.5-.5zM5.712 14.459a1 1 0 00-.757-1.637l-.95.316A1 1 0 002 15v1a1 1 0 00.757.966l.95.316a1 1 0 00.671-1.344zM4 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM5.712 5.541a1 1 0 00.757-1.637l.95.316A1 1 0 008 3V2a1 1 0 00-.757-.966l-.95-.316A1 1 0 005.712 5.541zM10.5 4a.5.5 0 01-.5.5v1a.5.5 0 011 0V4a.5.5 0 01-.5-.5zm4.288 5.541a1 1 0 00-1.637-.757l-.316-.95A1 1 0 0010 2h-1a1 1 0 00-.966.757l-.316.95a1 1 0 001.344.671z"></path></svg>
</button>
</div>
</header>
<!-- Main Content Body (Placeholder) -->
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 dark:bg-gray-900 p-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Welcome to your Dashboard!</h2>
<p class="text-gray-700 dark:text-gray-300">This is a placeholder for your dashboard content. You can add charts, data tables, and other widgets here.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Total Sales</h3>
<div class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Monthly</div>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
<p class="text-sm text-green-600 dark:text-green-400"><svg class="inline-block w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 5.2% since last month</p>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Users</h3>
<div class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Weekly</div>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">875</p>
<p class="text-sm text-red-600 dark:text-red-400"><svg class="inline-block w-4 h-4 mr-1 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 1.8% since last week</p>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Orders Pending</h3>
<div class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Today</div>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">23</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Needs attention</p>
</div>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Recent Activity</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-3 flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200"><span class="font-medium">Sarah G.</span> added a new project "Website Redesign".</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</li>
<li class="py-3 flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200"><span class="font-medium">You</span> updated task "Fix Login Bug".</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
</li>
<li class="py-3 flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200"><span class="font-medium">System</span> generated new sales report.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">3 days ago</span>
</li>
</ul>
</div>
</div>
</main>
</div>
</div>
<!-- Alpine.js for dropdowns and sidebar toggle -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<!-- Dark Mode Script -->
<script>
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
}
const themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function() {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
</script>Componenti correlati
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale reattivo progettato in stile Brutalismo, perfetto per le applicazioni di e-commerce. Presenta colori vivaci, contrasto elevato e molteplici elementi interattivi, inclusi collegamenti a diverse categorie di shopping, opzioni di account utente e un vivace pulsante di invito all'azione per l'accesso al carrello. Il design si adatta anche alla modalità oscura.
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale complesso e reattivo per un'interfaccia utente del marketplace, con colori vivaci e supporto per la modalità scura. Include più sezioni, elementi interattivi e profilo utente.
Navigazione nella barra laterale di Glassmorphism
Un componente di navigazione della barra laterale reattivo con design Glassmorphism, supporto per la modalità oscura e utilizzo di Tailwind CSS. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura.