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.
HTML Code
<div class="flex h-screen bg-gray-200 dark:bg-gray-900">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-xl"
style="backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.1);"
>
<div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700">
<span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
</div>
<nav class="flex-1 px-2 py-4 space-y-2">
<a
href="#"
class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-6 9l2-2m2 2l2-2"></path></svg>
Home
</a>
<a
href="#"
class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Analytics
</a>
<a
href="#"
class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 5h2m-2 0h-2"></path></svg>
Reports
</a>
<a
href="#"
class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Settings
</a>
</nav>
<div class="flex items-center justify-center h-16 border-t border-gray-300 dark:border-gray-700">
<img
class="w-10 h-10 rounded-full"
src="https://randomuser.me/api/portraits/men/75.jpg"
alt="Avatar"
>
<span class="ml-2 text-sm font-semibold text-gray-800 dark:text-white">John Doe</span>
</div>
</div>
<!-- Content Area (can be added here) -->
</div>Composants associés
Composant de navigation dans la barre latérale
Une navigation simple et réactive dans la barre latérale pour les applications de médias sociaux, optimisée pour le mode sombre avec une palette de couleurs analogue. Il comprend une section de profil avec un avatar et un nom d’utilisateur, ainsi que des liens de navigation. La conception utilise Tailwind CSS pour le style et la réactivité, avec la prise en charge du mode sombre via le préfixe dark : intégré de Tailwind.
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.
Composant de navigation dans la barre latérale - Niveaux de gris
Composant de navigation dans la barre latérale réactive