Загрузка...
Боковая панель навигации в темной теме. Включает профиль, ссылки, статистику. Идеально для дашбордов. Адаптивный дизайн.
<aside class="w-80 min-h-[600px] shadow-2xl overflow-hidden bg-slate-900 border border-slate-800 rounded-2xl">
<div class="p-6 border-b border-slate-800 bg-slate-900">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white">
<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path>
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path>
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>
</svg>
</div>
<div>
<h1 class="text-lg font-semibold text-white tracking-tight">FlowSync</h1>
<p class="text-xs text-slate-400">Integration Hub</p>
</div>
</div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1460904577954-8fadb262612c?w=1080&q=80" class="w-10 h-10 object-cover border-slate-700 border-2 rounded-xl" alt="User">
<div class="absolute -top-1 -right-1 w-4 h-4 bg-emerald-400 rounded-full border-2 border-slate-900"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-slate-800/50 rounded-lg p-3 hover:bg-slate-800/70 transition-all duration-300 hover:-translate-y-0.5">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-indigo-400">
<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
</svg>
<span class="text-xs text-slate-400">Active</span>
</div>
<div class="text-lg font-semibold text-white">12</div>
</div>
<div class="bg-slate-800/50 rounded-lg p-3 hover:bg-slate-800/70 transition-all duration-300 hover:-translate-y-0.5">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-emerald-400">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span class="text-xs text-slate-400">Saved</span>
</div>
<div class="text-lg font-semibold text-white">31h</div>
</div>
</div>
</div>
<nav class="p-4 space-y-2 bg-slate-900">
<div class="mb-4">
<h3 class="text-xs font-medium text-slate-500 uppercase tracking-wider mb-3">Workspace</h3>
<div class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white rounded-lg font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</svg>
<span>Dashboard</span>
<span class="ml-auto text-xs bg-indigo-500 px-2 py-0.5 rounded-full">Live</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path>
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path>
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>
</svg>
<span>Integrations</span>
<span class="ml-auto text-xs text-slate-500">8</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
</svg>
<span>Workflows</span>
<span class="ml-auto text-xs text-slate-500">24</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-slate-300 hover:bg-slate-800 hover:text-white rounded-lg transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
<span>Team</span>
</a>
</div>
</div>
<div class="mb-4">
<h3 class="text-xs font-medium text-slate-500 uppercase tracking-wider mb-3">Connected Apps</h3>
<div class="space-y-2">
<div class="flex items-center gap-3 px-3 py-2 bg-slate-800/30 rounded-lg border border-slate-800">
<div class="w-6 h-6 bg-green-500 rounded-md flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-white">
<line x1="4" x2="20" y1="9" y2="9"></line>
<line x1="4" x2="20" y1="15" y2="15"></line>
<line x1="10" x2="8" y1="3" y2="21"></line>
<line x1="16" x2="14" y1="3" y2="21"></line>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-white">Slack</p>
<p class="text-xs text-slate-400">3 channels</p>
</div>
<div class="w-2 h-2 bg-green-400 rounded-full"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2 hover:bg-slate-800/30 rounded-lg transition-all duration-200">
<div class="w-6 h-6 bg-blue-500 rounded-md flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-white">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M10 9H8"></path>
<path d="M16 13H8"></path>
<path d="M16 17H8"></path>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-white">Notion</p>
<p class="text-xs text-slate-400">12 pages</p>
</div>
<div class="w-2 h-2 bg-blue-400 rounded-full"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2 hover:bg-slate-800/30 rounded-lg transition-all duration-200">
<div class="w-6 h-6 bg-orange-500 rounded-md flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-white">
<line x1="6" x2="6" y1="3" y2="15"></line>
<circle cx="18" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M18 9a9 9 0 0 1-9 9"></path>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-white">GitHub</p>
<p class="text-xs text-slate-400">5 repos</p>
</div>
<div class="w-2 h-2 bg-orange-400 rounded-full"></div>
</div>
</div>
</div>
<div>
<button class="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white rounded-lg px-4 py-3 font-medium transition-all duration-300 hover:-translate-y-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<span>Add Integration</span>
</button>
</div>
</nav>
<div class="mt-auto p-4 border-t border-slate-800 bg-slate-900">
<div class="flex items-center justify-between text-xs text-slate-400">
<span>Status: All systems operational</span>
<div class="flex items-center gap-1">
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
<span>Online</span>
</div>
</div>
</div>
</aside>