Composant de navigation dans la barre latérale
Un composant de navigation simple et réactif conçu pour les tableaux de bord, avec des animations attrayantes et une palette de couleurs terreuses. Il prend en charge le mode sombre.
HTML Code
<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
<div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
<h1 class="text-xl text-white font-bold">Dashboard</h1>
</div>
<nav class="flex-1 p-4">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
<img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
<span>Reports</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
<img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
<span>Settings</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-gray-300 dark:border-gray-700">
<a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
</div>
</div>Composants associés
Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif stylisé de manière skeuomorphique avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de navigation dans la barre latérale - Memphis en sourdine
Un composant de navigation latéral complexe et réactif inspiré du design de Memphis avec une palette de couleurs sourdes, adapté à la documentation et aux sites wiki. Comprend la prise en charge du mode sombre et des éléments interactifs.
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.