Consulting_Sidebar_Dark_Candy_Complex
Un composant de barre latérale complexe et réactif pour le conseil/les services, doté d’une interface utilisateur en mode sombre avec des accents de couleurs bonbons/doux. Comprend la navigation, le profil de l’utilisateur et les liens rapides.
HTML Code
<div class="flex h-screen bg-slate-900 dark:bg-gray-950 text-white font-sans">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-slate-800 dark:bg-gray-900 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">
<!-- Sidebar Header/Logo -->
<div class="flex items-center justify-center h-20 bg-pink-600 dark:bg-pink-700 shadow-md">
<span class="text-2xl font-bold uppercase tracking-wide text-white">ConsultPro</span>
</div>
<!-- User Profile Section -->
<div class="flex flex-col items-center py-6 border-b border-gray-700 dark:border-gray-800">
<img class="w-24 h-24 rounded-full border-4 border-pink-400 dark:border-pink-500 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<p class="mt-3 text-lg font-semibold text-pink-100 dark:text-pink-200">Alice Johnson</p>
<span class="text-sm text-gray-400 dark:text-gray-500">Senior Consultant</span>
<div class="flex mt-2 space-x-2">
<span class="px-3 py-1 text-xs font-semibold text-purple-700 dark:text-purple-300 bg-purple-200 dark:bg-purple-800 rounded-full">Premium</span>
<span class="px-3 py-1 text-xs font-semibold text-teal-700 dark:text-teal-300 bg-teal-200 dark:bg-teal-800 rounded-full">Active</span>
</div>
</div>
<!-- Navigation Menu -->
<nav class="flex-1 px-4 py-6 overflow-y-auto custom-scrollbar">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-pink-100 dark:text-pink-200 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
<svg class="h-6 w-6 mr-3 text-pink-300 dark:text-pink-400 group-hover:text-white" 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 2m-2-2v10a1 1 0 01-1 1h-3m-6 0C9 9 10 6 11 3s4 3 4 9L9 21z"></path></svg>
<span class="text-md font-medium">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
<svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" 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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
<span class="text-md font-medium">Clients</span>
<span class="ml-auto bg-green-500 dark:bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">12</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
<svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M10 12l2-2 2 2m-2-2v6m0-4h.01"></path></svg>
<span class="text-md font-medium">Projects</span>
<span class="ml-auto bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">New</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
<svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" 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>
<span class="text-md font-medium">Schedule</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
<svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" 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="M7 8h10M7 12h10M7 16h10M9 3H5C3.895 3 3 3.895 3 5V19c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2h-4M9 3v2c0 1.105-.895 2-2 2H5m14-4v2c0 1.105-.895 2-2 2h-4"></path></svg>
<span class="text-md font-medium">Reports</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
<svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" 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.071-.16.2-.28.35-.38l.608-.433a.997.997 0 011.034 0l.608.433c.15.1.279.22.35.38C14.072 5.097 15 5.928 15 7v3.586a1 1 0 01-.293.707l-3.586 3.586a1 1 0 01-1.414 0L7.293 11.293A1 1 0 017 10.586V7c0-1.072.928-1.903 2.175-2.683zM14 2c1 0 2 .5 2 1.5V11a2 2 0 01-2 2l-3 3c-.5.5-.667.667-1 1s-.5 0-1-1l-3-3a2 2 0 01-2-2V3.5C6 2.5 7 2 8 2h6zM4 17a2 2 0 002 2h12a2 2 0 002-2v-4a1 1 0 00-1-1H5a1 1 0 00-1 1v4z"></path></svg>
<span class="text-md font-medium">Settings</span>
</a>
</li>
</ul>
<div class="mt-8">
<h3 class="text-xs uppercase font-semibold text-gray-400 dark:text-gray-500 mb-2">Quick Links</h3>
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
<span class="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-600 mr-2"></span> Latest Articles
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
<span class="w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-600 mr-2"></span> Upcoming Events
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
<span class="w-2 h-2 rounded-full bg-orange-500 dark:bg-orange-600 mr-2"></span> My Tasks
</a>
</li>
</ul>
</div>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-700 dark:border-gray-800">
<button class="flex items-center justify-center w-full px-4 py-2 text-white bg-pink-600 dark:bg-pink-700 rounded-lg shadow-md hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-200 ease-in-out">
<svg class="h-5 w-5 mr-2" 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
<span>Logout</span>
</button>
</div>
</div>
<!-- Main Content Area (for demonstration, can be expanded) -->
<div class="flex-1 flex flex-col p-8">
<h1 class="text-3xl font-bold text-pink-400 dark:text-pink-300 mb-6">Dashboard Overview</h1>
<p class="text-gray-300 dark:text-gray-400">Welcome back, Alice! Here's a quick look at your current activities.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
<h2 class="text-lg font-semibold text-pink-200 mb-2">Active Projects</h2>
<p class="text-4xl font-bold text-pink-400">23</p>
<span class="text-sm text-green-400">+5 this month</span>
</div>
<div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
<h2 class="text-lg font-semibold text-pink-200 mb-2">New Clients</h2>
<p class="text-4xl font-bold text-pink-400">8</p>
<span class="text-sm text-yellow-400">+2 this week</span>
</div>
<div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
<h2 class="text-lg font-semibold text-pink-200 mb-2">Pending Tasks</h2>
<p class="text-4xl font-bold text-pink-400">17</p>
<span class="text-sm text-red-400">Urgent: 3</span>
</div>
</div>
</div>
<!-- Mobile Sidebar Toggle (hidden on desktop) -->
<button class="md:hidden fixed top-4 left-4 z-50 p-3 rounded-full bg-pink-600 dark:bg-pink-700 text-white shadow-xl focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('translate-x-full'); document.getElementById('sidebar').classList.toggle('bg-slate-800'); document.getElementById('sidebar').classList.toggle('dark:bg-gray-900'); this.classList.toggle('translate-x-52');">
<svg class="h-6 w-6" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<!-- Overlay for mobile (hidden on desktop) -->
<div class="md:hidden fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out opacity-0 pointer-events-none" id="sidebar-overlay"></div>
<!-- Inline style for custom-scrollbar -->
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #374151; /* gray-700 */
border-radius: 4px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: #1f2937; /* gray-800 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #f472b6; /* pink-400 */
border-radius: 4px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: #ec4899; /* pink-500 */
}
/* Mobile specific adjustments using JS for sidebar toggle */
@media (max-width: 767px) {
#sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 50;
transform: translateX(-100%);
}
.toggle-button {
transition: transform 0.3s ease-in-out;
}
.sidebar-open #sidebar {
transform: translateX(0%);
}
.sidebar-open .toggle-button {
transform: translateX(208px); /* 256px sidebar width - 48px button width */
}
.sidebar-open #sidebar-overlay {
opacity: 1;
pointer-events: auto;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sidebar = document.getElementById('sidebar');
const sidebarToggle = document.querySelector('button[onclick*="sidebar"]');
const sidebarOverlay = document.getElementById('sidebar-overlay');
sidebarToggle.addEventListener('click', () => {
document.body.classList.toggle('sidebar-open');
sidebar.classList.toggle('translate-x-0');
sidebar.classList.toggle('-translate-x-full'); // Added to ensure it slides off screen
sidebarOverlay.classList.toggle('opacity-0');
sidebarOverlay.classList.toggle('pointer-events-none');
sidebarOverlay.classList.toggle('opacity-100');
sidebarOverlay.classList.toggle('pointer-events-auto');
});
sidebarOverlay.addEventListener('click', () => {
document.body.classList.remove('sidebar-open');
sidebar.classList.remove('translate-x-0');
sidebar.classList.add('-translate-x-full');
sidebarOverlay.classList.add('opacity-0');
sidebarOverlay.classList.add('pointer-events-none');
sidebarOverlay.classList.remove('opacity-100');
sidebarOverlay.classList.remove('pointer-events-auto');
// Also revert the button position
sidebarToggle.classList.remove('translate-x-52');
});
// Close sidebar if window resized to desktop from mobile
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) {
document.body.classList.remove('sidebar-open');
sidebar.classList.remove('-translate-x-full');
sidebar.classList.add('translate-x-0');
sidebarOverlay.classList.add('opacity-0');
sidebarOverlay.classList.add('pointer-events-none');
sidebarOverlay.classList.remove('opacity-100');
sidebarOverlay.classList.remove('pointer-events-auto');
// Revert button for desktop view
sidebarToggle.classList.remove('translate-x-52');
}
});
});
</script>
</div>Composants associés
Neon_Glow_Grayscale_Sports_Sidebar
Un composant de barre latérale complexe et réactif pour les applications de sport/fitness, avec des effets de néon/lueur dans une palette de couleurs en niveaux de gris. Inclut la prise en charge du mode sombre et des éléments interactifs tels que le profil, la navigation, les équipes et les paramètres.
Composant de la barre latérale
Un composant de barre latérale complexe, réactif, de style Glassmorphism pour un tableau de bord, avec des tons de terre et la prise en charge du mode sombre.
Barre latérale Skeuomorphism
Un composant de barre latérale réactif avec un design Skeuomorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS.