Composant de navigation dans la barre latérale
Un composant de navigation dans la barre latérale simple et réactif avec des effets de survol axés sur la micro-interaction, conçu pour les sites Web gouvernementaux/de services publics. Dispose d’une palette de couleurs analogue et d’une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif avec des éléments de conception 3D, une palette de couleurs analogue et une complexité moyenne avec des fonctionnalités interactives. Convient aux blogs ou aux sites Web de contenu.
RetroBarre latéraleNavigation
Un composant de navigation réactif et simple pour les sites Web d’entreprise, avec prise en charge du mode sombre.
Glassmorphism Navigation latérale
Une navigation complexe et réactive dans la barre latérale Glassmorphism pour un tableau de bord avec un schéma de couleurs complémentaire, la prise en charge du mode sombre et aucun JavaScript.