Composant du menu Hamburger
Un composant de menu hamburger réactif conçu avec un style 3D, adapté aux besoins du tableau de bord. Il intègre une palette de couleurs triadique et possède une interface complexe avec des éléments interactifs, prenant en charge les thèmes clairs et sombres.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-16 h-16 mt-8 cursor-pointer group">
<div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
<div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
<div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
</div>
<nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
<ul class="py-2">
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Dashboard</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Reports</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Analytics</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Settings</span>
</li>
<li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
<img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Profile</span>
</li>
</ul>
</nav>
</div>Composants associés
Composant du menu Hamburger
Un composant réactif du menu Hamburger conçu dans le style brutalisme avec une palette de couleurs pastel. Convient pour un portfolio présentant des travaux ou des produits.
Composant du menu Hamburger
Un menu hamburger réactif conçu pour les interfaces de médias sociaux avec un thème en mode sombre et une palette de couleurs complémentaire.