Компонент навигации на боковой панели
Сложный, отзывчивый компонент навигации на боковой панели для пользовательского интерфейса маркетплейса с яркими цветами и поддержкой темного режима. Включает в себя несколько разделов, интерактивные элементы и профиль пользователя.
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>Связанные компоненты
Навигация по боковой панели Glassmorphism
Адаптивный компонент навигации на боковой панели с дизайном Glassmorphism, поддержкой темного режима и использованием Tailwind CSS. Полупрозрачные элементы, похожие на матовое стекло, с эффектами размытия.
Компонент навигации по боковой панели социальных сетей
Адаптивный компонент навигации по боковой панели социальных сетей с поддержкой темных тем, использующих принципы брутализма, земляных тонов и сложного. JavaScript не нужен.
Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component
Простой, отзывчивый компонент навигации на боковой панели с органичным, вдохновленным природой дизайном в оттенках сепии и коричневого, подходит для здравоохранения и медицинских приложений. Включает поддержку темного режима.