Загрузка...
Светлая навигационная боковая панель: шапка, меню, статистика, приложения, статус. Для современных админ-панелей.
<aside class="w-80 min-h-[600px] shadow-2xl overflow-hidden bg-white border border-slate-200 rounded-2xl">
<div class="p-6 border-b border-slate-200 bg-white">
<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-slate-800 to-slate-900 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-slate-900 tracking-tight">FlowSync</h1>
<p class="text-xs text-slate-500">Integration Hub</p>
</div>
</div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1532170579297-281918c8ae72?w=1080&q=80" class="w-10 h-10 object-cover border-slate-200 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-white"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-slate-50 rounded-lg p-3 hover:bg-slate-100 transition-all duration-300 border border-slate-100 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-600">
<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-600">Active</span>
</div>
<div class="text-lg font-semibold text-slate-900">12</div>
</div>
<div class="bg-slate-50 rounded-lg p-3 hover:bg-slate-100 transition-all duration-300 border border-slate-100 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-600">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span class="text-xs text-slate-600">Saved</span>
</div>
<div class="text-lg font-semibold text-slate-900">31h</div>
</div>
</div>
</div>
<nav class="p-4 space-y-2 bg-white">
<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-slate-900 to-slate-800 text-white rounded-lg font-medium shadow-sm">
<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-slate-700 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-700 hover:bg-slate-100 hover:text-slate-900 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-700 hover:bg-slate-100 hover:text-slate-900 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-700 hover:bg-slate-100 hover:text-slate-900 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-green-50 rounded-lg border border-green-100">
<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-slate-900">Slack</p>
<p class="text-xs text-slate-600">3 channels</p>
</div>
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 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-slate-900">Notion</p>
<p class="text-xs text-slate-600">12 pages</p>
</div>
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
</div>
<div class="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 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-slate-900">GitHub</p>
<p class="text-xs text-slate-600">5 repos</p>
</div>
<div class="w-2 h-2 bg-orange-500 rounded-full"></div>
</div>
</div>
</div>
<div>
<button class="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-slate-900 to-slate-800 hover:from-slate-800 hover:to-slate-700 text-white rounded-lg px-4 py-3 font-medium transition-all duration-300 hover:-translate-y-0.5 shadow-sm">
<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-200 bg-white">
<div class="flex items-center justify-between text-xs text-slate-600">
<span>Status: All systems operational</span>
<div class="flex items-center gap-1">
<div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
<span>Online</span>
</div>
</div>
</div>
</aside>