Cryptocurrency Sidebar 구성 요소
암호화폐 및 블록체인 애플리케이션용으로 설계된 복잡하고 반응형이 빠른 사이드바 구성 요소로, 음소거된 색 구성표와 완전한 다크 모드를 지원하는 머티리얼 디자인 원칙을 특징으로 합니다.
HTML 코드
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<!-- Sidebar -->
<div class="w-64 flex-shrink-0 bg-white dark:bg-gray-800 shadow-lg md:relative absolute inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-300 ease-in-out z-40" id="sidebar">
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400 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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M10.25 10h3.5m-3.5 3h3.5m-4.5 9V5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3-7 3z"></path>
</svg>
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">CryptoVault</span>
</div>
<button class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); document.getElementById('backdrop').classList.add('hidden');">
<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="mt-4">
<a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out active:bg-gray-300 dark:active:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-5 h-5 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-15 4v-2a3 3 0 013-3h2m0 0a3 3 0 013-3h2m-3 2v5h-5M3 12h18"></path>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center py-3 px-4 text-indigo-600 dark:text-indigo-400 bg-gray-200 dark:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out shadow-sm">
<svg class="w-5 h-5 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 17.364l-.707.707M3 12H2m1-.636L1.636 4.636l.707.707M12 22v-1m-4.636-.707l-.707-.707M3 12h-1M12 21v-1m-4.636-1.364l-.707-.707M2 12h-1M12 23v-1M12 15a3 3 0 110-6 3 3 0 010 6z"></path>
</svg>
Portfolio
</a>
<a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-5 h-5 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2m0 0v6a2 2 0 002 2h2m2-4h1v4c0 .552.448 1 1 1h2a1 1 0 001-1v-4h1m-6 0h6m-9-6h9c1.657 0 3 1.343 3 3v3H3V6c0-1.657 1.343-3 3-3z"></path>
</svg>
Transactions
</a>
<a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-5 h-5 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="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 11-9 9m9-9A9 9 0 0121 12a9 9 0 01-9 9m-9-9a9 9 0 009 9m0-9V5"></path>
</svg>
Exchange
</a>
<a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-5 h-5 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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
Analytics
</a>
</nav>
<div class="mt-auto p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center space-x-3 mb-4">
<img class="h-10 w-10 rounded-full object-cover border-2 border-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Premium User</p>
</div>
</div>
<a href="#" class="w-full flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-4 h-4 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="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.37a1.724 1.724 0 002.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>
</div>
</div>
<!-- Main Content Area Placeholder -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Bar (Minimal for this component) -->
<header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-md">
<button class="md:hidden focus:outline-none text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="document.getElementById('sidebar').classList.remove('-translate-x-full'); document.getElementById('backdrop').classList.remove('hidden');">
<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-semibold text-gray-900 dark:text-gray-100">Portfolio Overview</h1>
<div class="flex items-center space-x-4">
<!-- Dark mode toggle placeholder -->
<button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500" onclick="document.documentElement.classList.toggle('dark')">
<svg class="w-5 h-5" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
</button>
</div>
</header>
<main class="flex-1 overflow-x-hidden overflow-y-auto p-6">
<!-- Your main content goes here -->
<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-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Total Balance</h2>
<p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">$23,456.78</p>
<p class="text-sm text-green-500 mt-2">+3.4% today</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Bitcoin Holding</h2>
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">0.5 BTC</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Value: $15,000</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Recent Activity</h2>
<ul class="space-y-3">
<li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
<span>Buy ETH</span>
<span class="text-green-500">+$500</span>
</li>
<li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
<span>Sell ADA</span>
<span class="text-red-500">-$120</span>
</li>
<li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
<span>Deposit USD</span>
<span class="text-green-500">+$1000</span>
</li>
</ul>
</div>
</div>
</main>
</div>
<!-- Overlay for mobile sidebar -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden" id="backdrop" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); this.classList.add('hidden');"></div>
</div>관련 구성 요소
사이드바 구성 요소
보색 구성표가 있는 Glassmorphism 스타일의 사이드바 구성 요소로, 중간 정도의 복잡성을 가진 포트폴리오 웹 사이트를 위해 설계되었습니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.
사이드바 구성 요소
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 사이드바 구성 요소입니다. 미묘한 그림자가 있는 부드러운 UI 모양이 특징이며 어두운 모드를 지원하며 자리 표시자 이미지와 아바타가 포함되어 있습니다.
Skeuomorphic Pastel 사이드바
스큐어모픽 디자인과 파스텔 색상의 단순하고 반응이 빠른 사이드바 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.