Sidebar Navigation 구성 요소
마켓플레이스 UI를 위한 복잡하고 반응이 빠른 사이드바 탐색 구성 요소로, 생생한 색상과 다크 모드 지원을 제공합니다. 여러 섹션, 대화형 요소 및 사용자 프로필이 포함됩니다.
HTML 코드
<div class="flex h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-gray-900 dark:border-gray-800 transition-all duration-300 ease-in-out sm:w-64 md:w-64 lg:w-64">
<div class="flex items-center justify-between h-16 px-6 border-b border-gray-800 dark:border-gray-800">
<span class="text-2xl font-bold text-yellow-400 dark:text-yellow-400">MarketPulse</span>
<!-- Mobile menu button for collapsing / expanding if needed for smaller screens -->
<button class="flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-500 lg:hidden">
<svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="flex-1 overflow-y-auto pt-4 pb-8">
<nav class="mt-4 space-y-2">
<!-- Main Navigation -->
<h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mb-2">Dashboard</h3>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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-13 13v-3a1 1 0 011-1h6a1 1 0 011 1v3m-6 3h6a2 2 0 002-2v-7a2 2 0 00-2-2H9a2 2 0 00-2 2v7a2 2 0 002 2z" />
</svg>
Home
</a>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18zm-2 9l2 2 4-4" />
</svg>
Orders
<span class="ml-auto bg-purple-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full dark:bg-purple-600">5</span>
</a>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2a3 3 0 01-3-2c0-1.105 1.343-2 3-2zM3 12s2 5 9 5 9-5 9-5H3z" />
</svg>
Products
</a>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
Payments
</a>
<!-- Marketplace Tools -->
<h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mt-6 mb-2">Market Tools</h3>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Listings
</a>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
Messages
<span class="ml-auto bg-orange-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full dark:bg-orange-600">99+</span>
</a>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Analytics
</a>
<!-- Settings & Support -->
<h3 class="px-6 uppercase text-xs font-semibold text-gray-400 mt-6 mb-2">Account</h3>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.51-.129 1.05-.129 1.56 0A7.5 7.5 0 0121 12a7.5 7.5 0 01-9.675 7.683A7.5 7.5 0 013 12a7.5 7.5 0 017.325-7.683z" />
</svg>
Settings
</a>
<a href="#" class="flex items-center px-6 py-2 text-gray-300 hover:text-yellow-400 hover:bg-gray-800 rounded-md transition-colors duration-200 ease-in-out dark:hover:text-yellow-400 dark:hover:bg-gray-800">
<svg class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a1 1 0 011.004-1.127l2.164.216a1 1 0 00.957-.456l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 011.01-.309l2.76 1.08a1 1 0 001.018-.308l.72-1.08a1 1 0 01-1.01-.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308l-.72 1.08a1 1 0 01-1.01.309l-2.76-1.08a1 1 0 00-1.018.308zM12 15a3 3 0 100-6 3 3 0 000 6z" />
</svg>
Support
</a>
</nav>
</div>
<!-- User Profile/Settings at bottom -->
<div class="flex items-center px-6 py-4 border-t border-gray-800 dark:border-gray-800">
<img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-white">Jane Doe</p>
<p class="text-xs text-gray-400">Vendor Account</p>
</div>
<button type="button" class="ml-auto p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-gray-900">
<svg class="h-6 w-6 text-gray-400 hover:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</button>
</div>
</div>
<!-- Main Content Area Placeholder -->
<div class="flex-1 flex flex-col">
<header class="flex items-center justify-between h-16 px-6 border-b border-gray-800 dark:border-gray-800 bg-gray-950 dark:bg-gray-950">
<h1 class="text-xl font-semibold text-white">Overview Dashboard</h1>
<div class="flex items-center space-x-4">
<button class="p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded-md">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<button class="p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 rounded-md">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
</div>
</header>
<main class="flex-1 overflow-y-auto p-6 bg-gray-950 dark:bg-gray-950">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-yellow-500/20 transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-lg font-semibold text-yellow-400 mb-2">Total Sales</h2>
<p class="text-4xl font-bold text-white mb-4">$12,345</p>
<div class="flex items-center text-green-400">
<svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
<span class="text-sm">+5.2% last month</span>
</div>
</div>
<!-- Card 2 -->
<div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-purple-500/20 transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-lg font-semibold text-purple-400 mb-2">New Orders</h2>
<p class="text-4xl font-bold text-white mb-4">1,234</p>
<div class="flex items-center text-red-400">
<svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
</svg>
<span class="text-sm">-1.5% last month</span>
</div>
</div>
<!-- Card 3 -->
<div class="bg-gray-900 rounded-lg shadow-lg p-6 hover:shadow-blue-500/20 transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-lg font-semibold text-blue-400 mb-2">Active Listings</h2>
<p class="text-4xl font-bold text-white mb-4">567</p>
<div class="flex items-center text-green-400">
<svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
<span class="text-sm">+10 new this week</span>
</div>
</div>
</div>
<div class="bg-gray-900 rounded-lg shadow-lg p-6 mt-6">
<h2 class="text-lg font-semibold text-white mb-4">Recent Activities</h2>
<ul class="divide-y divide-gray-800">
<li class="flex items-center justify-between py-3">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-green-500" src="https://picsum.photos/id/65/50/50" alt="Product Image">
<div>
<p class="text-white font-medium">Order <span class="text-yellow-400">#12345</span> processed</p>
<p class="text-sm text-gray-400">New Playstation 5 disc version</p>
</div>
</div>
<span class="text-sm text-gray-500">2 hours ago</span>
</li>
<li class="flex items-center justify-between py-3">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-blue-500" src="https://picsum.photos/id/237/50/50" alt="Product Image">
<div>
<p class="text-white font-medium">New product <span class="text-yellow-400">'Gaming Mouse X'</span> listed</p>
<p class="text-sm text-gray-400">Added to Electronics category</p>
</div>
</div>
<span class="text-sm text-gray-500">Yesterday</span>
</li>
<li class="flex items-center justify-between py-3">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-red-500" src="https://picsum.photos/id/1084/50/50" alt="Product Image">
<div>
<p class="text-white font-medium">Payment of <span class="text-yellow-400">$250.00</span> received</p>
<p class="text-sm text-gray-400">From customer John Doe</p>
</div>
</div>
<span class="text-sm text-gray-500">3 days ago</span>
</li>
</ul>
</div>
</main>
</div>
</div>관련 구성 요소
Sidebar Navigation 구성 요소
Brutalism 스타일로 설계된 반응형 사이드바 탐색 구성 요소로, 전자 상거래 애플리케이션에 적합합니다. 생생한 색상, 고대비, 다양한 쇼핑 카테고리에 대한 링크, 사용자 계정 옵션, 장바구니 액세스를 위한 생생한 클릭 유도문안 버튼을 포함한 여러 대화형 요소가 특징입니다. 디자인은 다크 모드에도 적용됩니다.
Glassmorphism 사이드바 탐색
복잡하고 반응이 빠른 Glassmorphism 사이드바 탐색은 보색 구성표, 다크 모드 지원 및 JavaScript가 없는 대시보드를 제공합니다.