Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale semplice e reattivo con effetti di passaggio del mouse incentrati sulla microinterazione, progettato per siti Web governativi/di servizio pubblico. Dispone di una combinazione di colori analoga e del supporto per la modalità scura.
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<!-- Sidebar -->
<aside class="w-64 bg-teal-600 dark:bg-teal-800 text-white shadow-lg overflow-y-auto transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out md:relative absolute z-40" id="sidebar">
<div class="p-6 flex items-center justify-between border-b border-teal-500 dark:border-teal-700">
<a href="#" class="text-2xl font-bold text-white tracking-wide">GovConnect</a>
<button id="sidebar-close" class="md:hidden focus:outline-none">
<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"></path>
</svg>
</button>
</div>
<nav class="mt-8">
<ul>
<li>
<a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" 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 1h3v-3m-6 3h3v-3m0 0a1 1 0 001-1V9a1 1 0 00-1-1h-3c-.6 0-1 .4-1 1v3c0 .6.4 1 1 1z"></path>
</svg>
<span class="group-hover:translate-x-1 transition-transform duration-200">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
</svg>
<span class="group-hover:translate-x-1 transition-transform duration-200">Public Services</span>
</a>
</li>
<li>
<a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.3.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="group-hover:translate-x-1 transition-transform duration-200">Citizens</span>
</a>
</li>
<li>
<a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
</svg>
<span class="group-hover:translate-x-1 transition-transform duration-200">Departments</span>
</a>
</li>
<li>
<a href="#" class="flex items-center px-6 py-3 text-teal-100 dark:text-teal-200 hover:bg-teal-500 dark:hover:bg-teal-700 hover:text-white transition-all duration-200 ease-in-out group">
<svg class="h-5 w-5 mr-3 group-hover:scale-110 transition-transform duration-200" 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.37.589.362 1.36.259 1.93-1.066zm-2.476 8.36L9.73 12m0 0l-3.33-2.35M9.73 12l-2.35 3.33M12 2v4m0 16v-4m-10-8H4m16 0h-2"></path>
</svg>
<span class="group-hover:translate-x-1 transition-transform duration-200">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="absolute bottom-0 left-0 w-full p-6 border-t border-teal-500 dark:border-teal-700 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-teal-400 dark:border-teal-600">
<div>
<p class="text-sm font-semibold text-white">John Doe</p>
<p class="text-xs text-teal-200 dark:text-teal-300">Administrator</p>
</div>
</div>
</aside>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col">
<header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md md:shadow-none relative z-30">
<button id="sidebar-open" class="md:hidden focus:outline-none text-gray-700 dark:text-gray-300">
<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"></path>
</svg>
</button>
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard Overview</h1>
<!-- Dark Mode Toggle -->
<button id="dark-mode-toggle" class="focus:outline-none p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
<svg class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="light-icon" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-4.32a6 6 0 11-1.042 12.639C10.156 20.354 11.229 21 12 21c3.866 0 7-3.134 7-7s-3.134-7-7-7z"></path>
<path id="dark-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</button>
</header>
<main class="flex-1 p-6 md:p-8 overflow-y-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Latest Announcement</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">New guidelines for public assistance available from October 1st.</p>
<a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
Read More
<svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Open Data Portal</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Explore datasets related to local economy and demographics.</p>
<a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
Access Data
<svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6 flex flex-col items-start">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Contact Support</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Our support team is available 24/7 for your queries.</p>
<a href="#" class="mt-4 text-teal-600 dark:text-teal-400 hover:underline flex items-center group">
Get Help
<svg class="h-4 w-4 ml-1 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder Image" class="mt-4 rounded-md w-full object-cover max-h-32">
</div>
</div>
</main>
</div>
</div>
<script>
const sidebar = document.getElementById('sidebar');
const sidebarOpenBtn = document.getElementById('sidebar-open');
const sidebarCloseBtn = document.getElementById('sidebar-close');
const darkModeToggle = document.getElementById('dark-mode-toggle');
const lightIcon = document.getElementById('light-icon');
const darkIcon = document.getElementById('dark-icon');
// Sidebar Toggle
sidebarOpenBtn.addEventListener('click', () => {
sidebar.classList.remove('-translate-x-full');
});
sidebarCloseBtn.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
});
// Close sidebar if window resized to md or larger while open
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) { // md breakpoint
sidebar.classList.remove('-translate-x-full');
}
});
// Dark Mode Toggle
function toggleDarkMode() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
lightIcon.classList.add('hidden');
darkIcon.classList.remove('hidden');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
lightIcon.classList.remove('hidden');
darkIcon.classList.add('hidden');
}
}
darkModeToggle.addEventListener('click', toggleDarkMode);
// Initial theme setting based on localStorage or system preference
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark' || (!currentTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
lightIcon.classList.remove('hidden');
darkIcon.classList.add('hidden');
} else {
lightIcon.classList.add('hidden');
darkIcon.classList.remove('hidden');
}
</script>Componenti correlati
Componente di navigazione della barra laterale
Un componente di navigazione reattivo della barra laterale con elementi di progettazione 3D, una combinazione di colori analoga e una complessità media con funzionalità interattive. Adatto per blog o siti Web di contenuti.
Componente di navigazione della barra laterale - Scala di grigi
Componente di navigazione reattiva della barra laterale
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.