Consulting_Sidebar_Dark_Candy_Complex
コンサルティング/サービス用の複雑でレスポンシブなサイドバーコンポーネントで、キャンディー/甘い色のアクセントが付いたダークモードUIが特徴です。ナビゲーション、ユーザープロファイル、クイックリンクが含まれています。
HTMLコード
<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>関連コンポーネント
ヘルスケアサイドバーコンポーネント
ヘルスケアアプリケーション向けの複雑でミニマリスト、レスポンシブなサイドバーコンポーネントで、類似の配色とダークモードのサポートが特徴です。ナビゲーション、ユーザープロファイル、クイックリンクが含まれています。