3D_Sidebar_Documentation_Wiki
ドキュメントや Wiki サイト向けの複雑な 3D にインスパイアされたレスポンシブ サイドバー コンポーネントで、ウォーム ニュートラルと完全なダーク モードのサポートを使用しています。
HTMLコード
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">
<!-- Sidebar -->
<aside class="w-64 bg-white dark:bg-gray-800 shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 fixed md:relative" id="sidebar">
<div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-700">
<a href="#" class="text-2xl font-extrabold text-gray-800 dark:text-gray-100 tracking-tight relative">
<span class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-amber-400 to-amber-600 dark:from-yellow-500 dark:to-orange-700 opacity-20 rounded-lg blur-sm"></span>
<span class="relative z-10">WikiHub</span>
</a>
<button onclick="document.getElementById('sidebar').classList.add('-translate-x-full')" class="md:hidden focus:outline-none text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-6 h-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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<nav class="px-4 py-6 overflow-y-auto custom-scrollbar">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" 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 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
<span class="relative z-10">Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
<svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" 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 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
<span class="relative z-10">Getting Started</span>
</a>
</li>
<li>
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Core Concepts</h3>
<ul class="space-y-1 pl-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Introduction</span>
</a>
</li>
<li>
<a href="#" class="relative flex items-center p-2 text-amber-600 dark:text-yellow-400 bg-amber-50 dark:bg-gray-700 rounded-md font-medium shadow-sm active:bg-amber-100 dark:active:bg-gray-600">
<span class="text-sm">Architecture Overview</span>
<span class="absolute inset-0 border-2 border-amber-400 dark:border-yellow-600 rounded-md animate-pulse pointer-events-none opacity-50"></span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Data Models</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">API Reference</span>
</a>
</li>
</ul>
</li>
<li>
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Guides</h3>
<ul class="space-y-1 pl-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Installation</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Configuration</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Deployment</span>
<span class="ml-auto text-xs py-0.5 px-2 bg-amber-100 dark:bg-amber-800 text-amber-700 dark:text-amber-200 rounded-full font-medium shadow-inner opacity-75">New</span>
</a>
</li>
</ul>
</li>
<li>
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Resources</h3>
<ul class="space-y-1 pl-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Changelog</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">FAQ</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
<span class="text-sm">Support</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="p-4 mt-auto border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center space-x-3 mb-4">
<img class="w-10 h-10 rounded-full border border-gray-200 dark:border-gray-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-out" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Documentation Admin</p>
</div>
</div>
<button class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-yellow-500 transition-all duration-200 ease-in-out relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
<svg class="mr-2 -ml-1 w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 relative z-10" 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 class="relative z-10">Logout</span>
</button>
<!-- Dark mode toggle -->
<div class="mt-4 flex items-center justify-between text-gray-600 dark:text-gray-300">
<label for="dark-mode-toggle" class="cursor-pointer flex items-center">
<div class="relative">
<input type="checkbox" id="dark-mode-toggle" class="sr-only" onchange="document.documentElement.classList.toggle('dark')">
<div class="block bg-gray-300 dark:bg-gray-700 w-10 h-6 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform dark:translate-x-full dark:bg-gray-100"></div>
</div>
<span class="ml-3 text-sm">Dark Mode</span>
</label>
</div>
</div>
</aside>
<!-- Main Content Area (Placeholder) -->
<div class="flex-1 flex flex-col overflow-hidden relative">
<!-- Top Bar for mobile menu button -->
<header class="bg-white dark:bg-gray-800 shadow-sm h-16 flex items-center px-4 md:hidden border-b border-gray-200 dark:border-gray-700 relative z-30">
<button onclick="document.getElementById('sidebar').classList.remove('-translate-x-full')" class="focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 mr-4">
<svg class="w-6 h-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>
<h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">Documentation</h1>
</header>
<main class="flex-1 overflow-x-hidden overflow-y-auto p-6 lg:p-8 custom-scrollbar">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl mb-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-yellow-700 dark:to-orange-800 opacity-5 dark:opacity-10 rounded-lg blur-md"></div>
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Welcome to WikiHub!</h2>
<p class="text-gray-600 dark:text-gray-300 relative z-10">Explore our comprehensive guides and documentation.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Quick Start</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Get up and running with our step-by-step installation guide.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">API Reference</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Detailed documentation for all available API endpoints.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Troubleshooting</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Solutions to common issues and frequently asked questions.</p>
</div>
</div>
</main>
</div>
<style>
/* Custom scrollbar for better aesthetics */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: theme('colors.gray.100');
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: theme('colors.gray.700');
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.300');
border-radius: 10px;
border: 2px solid theme('colors.gray.100');
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.600');
border: 2px solid theme('colors.gray.700');
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.400');
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.500');
}
/* Dark mode toggle dot animation */
#dark-mode-toggle:checked + div .dot {
transform: translateX(100%);
}
</style>
</div>関連コンポーネント
スキューモーフィックパステルサイドバー
Skeuomorphic デザインとパステルカラーのシンプルでレスポンシブなサイドバーコンポーネントで、ブログやコンテンツサイトに適しています。ダークモードのサポートが含まれています。
サイドバーコンポーネント
Tailwind CSSを使用したレスポンシブサイドバーコンポーネントで、マテリアルデザインの原則とダークテーマのサポートを備えています。ロゴとタイトルを含むヘッダーと、リンクを含むナビゲーション メニューが含まれます。