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>관련 구성 요소
사이드바 구성 요소
레트로/빈티지 스타일로 디자인된 반응형 사이드바 구성 요소로, 대시보드 레이아웃을 위한 생생한 색상으로 디자인되었습니다. 여기에는 다크 모드에 대한 지원이 포함됩니다.
사이드바 구성 요소
Tailwind CSS를 사용하여 디자인된 반응형 다크 모드 사이드바 구성 요소로, 어두운 배경, 호버 효과, 이미지 및 아바타에 대한 자리 표시자를 제공합니다.