Загрузка...
Адаптивная панель дашборда с двумя сайдбарами. Включает поиск, аккордеоны, быстрые действия. Идеально для SaaS, админ-панелей.
<main
class="flex flex-col gap-6 md:flex-row md:items-center md:gap-10 lg:gap-12 max-w-6xl mr-auto ml-auto gap-x-6 gap-y-6 items-stretch justify-center m-12">
<!-- ========== WORKSPACE SIDEBAR (CARD 1) ========== -->
<aside
class="flex flex-col overflow-hidden animate-fade-in-left bg-black/80 w-full md:w-80 h-[720px] md:h-[800px] border border-black/40 rounded-2xl relative shadow-xl shadow-black/40 backdrop-blur-xl"
id="workspace-sidebar">
<!-- Header -->
<div class="flex items-center justify-between h-20 px-6 border-b animate-fade-in-up delay-100 border-stone-900/80">
<div class="flex items-center gap-3">
<div
class="flex bg-gradient-to-br from-indigo-500 to-red-400 w-8 h-8 border-white/10 rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
viewBox="0 0 24 24" data-icon="solar:lightning-bold-duotone" data-width="18" data-height="18"
class="iconify-inline text-black iconify iconify--solar" style="vertical-align: -0.125em;">
<defs class="">
<path id="IconifyId19a86449190c1beb40" fill="currentColor"
d="M10.8 8h2.4c2.263 0 3.394 0 4.097.692C18 9.385 18 10.5 18 12.727v2.546c0 2.228 0 3.342-.703 4.035C16.594 20 15.463 20 13.2 20h-2.4c-2.263 0-3.394 0-4.097-.692C6 18.615 6 17.5 6 15.273v-2.546c0-2.228 0-3.342.703-4.035C7.406 8 8.537 8 10.8 8m1.8 4.45a.75.75 0 1 0-1.2-.9l-1.5 2a.75.75 0 0 0 .6 1.2H12l-.6.8a.75.75 0 1 0 1.2.9l1.5-2a.75.75 0 0 0-.6-1.2H12z"
class=""></path>
</defs>
<path fill="currentColor" fill-rule="evenodd"
d="M12.5 19.25a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75" clip-rule="evenodd"
opacity=".5" class=""></path>
<use href="#IconifyId19a86449190c1beb40" fill-rule="evenodd" clip-rule="evenodd" class=""></use>
<path fill="currentColor" d="M10.25 4.75A.75.75 0 0 1 11 4h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75"
class=""></path>
<use href="#IconifyId19a86449190c1beb40" fill-rule="evenodd" clip-rule="evenodd" class=""></use>
<path fill="currentColor"
d="M8.5 5.5c0-1.404 0-2.107.337-2.611a2 2 0 0 1 .552-.552C9.893 2 10.596 2 12 2s2.107 0 2.611.337a2 2 0 0 1 .552.552c.337.504.337 1.207.337 2.611v2.55C14.898 8 14.148 8 13.2 8h-2.4c-.948 0-1.697 0-2.3.05z"
opacity=".5" class=""></path>
</svg>
</div>
<div class="">
<h1 class="text-lg font-semibold tracking-tight font-sans">Product Hub</h1>
<p class="text-xs text-stone-500 font-sans">Growth Plan</p>
</div>
</div>
<div>
<div class="h-2 w-2 bg-emerald-400 rounded-full animate-pulse border border-emerald-200/50"></div>
</div>
</div>
<!-- Search -->
<div class="animate-fade-in-up delay-200 pt-4 pr-6 pb-4 pl-6 border-b border-stone-900/60">
<div class="relative rounded-xl border border-stone-800/90 bg-stone-950/80">
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-stone-600 <span class=" iconify-inline"=""
data-icon="solar:magnifer-linear" data-width="16" data-height="16">
</div>
<input id="searchLight" type="text" placeholder="Search projects or docs..." class="w-full h-10 pl-10 pr-4 bg-transparent text-sm placeholder-stone-500 focus:outline-none rounded-xl">
</div>
</div>
<!-- Navigation -->
<nav
class="flex-1 overflow-y-auto custom-scrollbar animate-fade-in-up delay-300 divide-y divide-stone-900/60 pt-4 pr-6 pb-4 pl-6">
<!-- Quick Actions -->
<div class="pb-5">
<div class="flex items-center justify-between mb-3">
<h2 class="text-xs font-medium text-stone-500 uppercase tracking-wider font-sans">Quick Actions</h2>
<button class="h-5 w-5 rounded-md flex items-center justify-center hover:bg-stone-900 border border-stone-800/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="11" height="11" viewBox="0 0 24 24" data-icon="solar:add-square-linear" data-width="11" data-height="11" class="iconify-inline text-stone-400 iconify iconify--solar" style="vertical-align: -0.125em;"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z" class=""></path><path stroke-linecap="round" d="M15 12h-3m0 0H9m3 0V9m0 3v3" class=""></path></g></svg>
</button>
</div>
<div class="grid grid-cols-2 gap-2">
<button class="hover:shadow-lg transition-all duration-200 hover:scale-[1.02] text-sm font-medium text-black bg-gradient-to-r from-indigo-500 to-red-400 h-10 border-white/20 rounded-lg">
New Roadmap
</button>
<button class="h-10 rounded-lg text-sm font-medium transition-colors bg-stone-900 hover:bg-stone-800 font-sans border border-stone-700/80">
Upload File
</button>
</div>
</div>
<!-- Main Navigation -->
<div class="space-y-1 py-5">
<h2 class="text-xs font-medium text-stone-500 uppercase tracking-wider mb-3 font-sans">Navigation</h2>
<!-- Dashboard -->
<a href="#"
class="group flex items-center gap-3 h-11 px-3 rounded-xl border transition-all duration-200 bg-indigo-950 text-indigo-300 border-indigo-700/80">
<div class="h-6 w-6 rounded-lg flex items-center justify-center bg-indigo-900/80 border border-indigo-700/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:widget-3-bold-duotone" data-width="16" data-height="16"
class="iconify-inline iconify iconify--solar" style="vertical-align: -0.125em;">
<g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" class="">
<path
d="M22.25 6.5a4.75 4.75 0 1 0-9.5 0a4.75 4.75 0 0 0 9.5 0m-11 11a4.75 4.75 0 1 0-9.5 0a4.75 4.75 0 0 0 9.5 0"
class=""></path>
<path
d="M1.75 6.5a4.75 4.75 0 1 1 9.5 0a4.75 4.75 0 0 1-9.5 0m11 11a4.75 4.75 0 1 1 9.5 0a4.75 4.75 0 0 1-9.5 0"
opacity=".5" class=""></path>
</g>
</svg>
</div>
<span class="text-sm font-medium font-sans">Overview</span>
<div class="ml-auto">
<span class="h-5 px-2 rounded-full text-xs font-medium bg-indigo-900 text-indigo-300 border border-indigo-700/90 font-sans">7</span>
</div>
</a>
<!-- Projects Accordion -->
<div class="">
<button data-accordion-btn="" class="group w-full flex items-center gap-3 h-11 px-3 rounded-xl transition-all duration-200 hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-6 w-6 rounded-lg flex items-center justify-center bg-stone-900 border border-stone-700/90">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:folder-with-files-bold-duotone" data-width="16" data-height="16" class="iconify-inline text-stone-300 iconify iconify--solar" style="vertical-align: -0.125em;"><path fill="currentColor" d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77q.119.105.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z" opacity=".5" class=""></path><path fill="currentColor" d="M20 6.238c0-.298-.005-.475-.025-.63a3 3 0 0 0-2.583-2.582C17.197 3 16.965 3 16.5 3H9.988c.116.104.247.234.462.45L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .849.352C14.098 6 14.675 6 15.829 6h.373c1.78 0 2.957 0 3.798.238" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M12.25 10a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75" clip-rule="evenodd" class=""></path></svg>
</div>
<span class="flex-1 text-sm font-medium text-left font-sans">Initiatives</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-linear" data-width="16" data-height="16" data-chevron="" class="iconify-inline text-stone-600 transition-transform duration-200 iconify iconify--solar" style="vertical-align: -0.125em;"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m19 9l-7 6l-7-6" class=""></path></svg>
</button>
<div data-accordion-content="" class="ml-9 mt-2 space-y-1 hidden">
<a href="#"
class="flex items-center gap-3 h-9 px-3 rounded-lg transition-colors hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-2 w-2 bg-emerald-400 rounded-full border border-emerald-200/70"></div>
<span class="text-sm text-stone-300 font-sans">Onboarding Flow</span>
<span class="ml-auto text-xs text-stone-500 font-sans">In progress</span>
</a>
<a href="#"
class="flex items-center gap-3 h-9 px-3 rounded-lg transition-colors hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-2 w-2 bg-sky-400 rounded-full border border-sky-200/70"></div>
<span class="text-sm text-stone-300 font-sans">Billing Revamp</span>
<span class="ml-auto text-xs text-stone-500 font-sans">Backlog</span>
</a>
<a href="#"
class="flex items-center gap-3 h-9 px-3 rounded-lg transition-colors hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-2 w-2 bg-fuchsia-400 rounded-full border border-fuchsia-200/70"></div>
<span class="text-sm text-stone-300 font-sans">AI Suggestions</span>
<span class="ml-auto text-xs text-stone-500 font-sans">Exploring</span>
</a>
</div>
</div>
<!-- Other nav items -->
<a href="#"
class="group flex items-center gap-3 h-11 px-3 rounded-xl transition-all duration-200 hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-6 w-6 rounded-lg flex items-center justify-center bg-stone-900 border border-stone-700/90">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:users-group-rounded-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-stone-300 iconify iconify--solar" style="vertical-align: -0.125em;">
<circle cx="15" cy="6" r="3" fill="currentColor" opacity=".4" class=""></circle>
<ellipse cx="16" cy="17" fill="currentColor" opacity=".4" rx="5" ry="3" class=""></ellipse>
<circle cx="9.001" cy="6" r="4" fill="currentColor" class=""></circle>
<ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4" class=""></ellipse>
</svg>
</div>
<span class="text-sm font-medium font-sans">People</span>
<div class="ml-auto flex -space-x-1">
<img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?w=800&q=80" class="h-5 w-5 rounded-full border-2 border-black object-cover" alt="">
<img src="https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?w=800&q=80" class="h-5 w-5 rounded-full border-2 border-black object-cover" alt="">
<span class="h-5 w-5 rounded-full border-2 flex items-center justify-center text-xs font-medium bg-stone-800 border-black text-stone-400 font-sans">+5</span>
</div>
</a>
<a href="#"
class="group flex items-center gap-3 h-11 px-3 rounded-xl transition-all duration-200 hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-6 w-6 rounded-lg flex items-center justify-center bg-stone-900 border border-stone-700/90">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:calendar-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-stone-300 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M6.94 2c.416 0 .753.324.753.724v1.46c.668-.012 1.417-.012 2.26-.012h4.015c.842 0 1.591 0 2.259.013v-1.46c0-.4.337-.725.753-.725s.753.324.753.724V4.25c1.445.111 2.394.384 3.09 1.055c.698.67.982 1.582 1.097 2.972L22 9H2v-.724c.116-1.39.4-2.302 1.097-2.972s1.645-.944 3.09-1.055V2.724c0-.4.337-.724.753-.724"
class=""></path>
<path fill="currentColor"
d="M22 14v-2c0-.839-.004-2.335-.017-3H2.01c-.013.665-.01 2.161-.01 3v2c0 3.771 0 5.657 1.172 6.828S6.228 22 10 22h4c3.77 0 5.656 0 6.828-1.172S22 17.772 22 14"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0"
class=""></path>
</svg>
</div>
<span class="text-sm font-medium font-sans">Timeline</span>
<span class="ml-auto h-5 px-2 rounded-full text-xs font-medium bg-red-900 text-red-300 border border-red-700/90 font-sans">5 due</span>
</a>
</div>
<!-- Recent Files -->
<div class="pt-5">
<h2 class="text-xs font-medium text-stone-500 uppercase tracking-wider mb-3 font-sans">Recent Files</h2>
<div class="space-y-2">
<a href="#"
class="flex items-center gap-3 h-10 px-3 rounded-lg transition-colors hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="flex bg-orange-900 w-6 h-6 border-orange-700/90 border rounded-md items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:document-text-bold-duotone" data-width="14" data-height="14"
class="iconify-inline iconify iconify--solar w-[14px] h-[14px]"
style="vertical-align: -0.125em; color: rgb(253, 186, 116); width: 14px; height: 14px;" stroke-width="2"
data-icon-replaced="true">
<path fill="currentColor"
d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z"
opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd"
d="M7.25 12a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0-4A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8m0 8a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"
clip-rule="evenodd" class=""></path>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate font-sans">Launch Checklist.md</p>
<p class="text-xs text-stone-500 font-sans">8 minutes ago</p>
</div>
</a>
<a href="#"
class="flex items-center gap-3 h-10 px-3 rounded-lg transition-colors hover:bg-stone-950 border border-transparent hover:border-stone-800/80">
<div class="h-6 w-6 rounded-md flex items-center justify-center bg-red-900 border border-red-700/90">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
style="color: rgb(253, 186, 116); width: 14px; height: 14px"
class="iconify-inline iconify iconify--solar w-[14px] h-[14px]" aria-hidden="true" role="img"
data-icon="solar:document-text-bold-duotone" data-width="14" data-height="14"
data-solar="documents-minimalistic-bold-duotone" data-icon-set="solar" data-icon-replaced="true"
stroke-width="2">
<g fill="#fdba74" fill-rule="evenodd" clip-rule="evenodd" class="">
<path
d="M10.75 2h2c2.828 0 4.243 0 5.121.879c.879.878.879 2.293.879 5.121v8c0 2.828 0 4.243-.879 5.121c-.878.879-2.293.879-5.121.879h-2c-2.828 0-4.243 0-5.121-.879c-.879-.878-.879-2.293-.879-5.121V8c0-2.828 0-4.243.879-5.121C6.507 2 7.922 2 10.75 2M8 13a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 8 13m0-4a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 8 9m0 8a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3A.75.75 0 0 1 8 17"
class=""></path>
<path
d="M1.75 4.25A.75.75 0 0 1 2.5 5v14A.75.75 0 0 1 1 19V5a.75.75 0 0 1 .75-.75m20 0a.75.75 0 0 1 .75.75v14a.75.75 0 0 1-1.5 0V5a.75.75 0 0 1 .75-.75"
opacity=".5" class=""></path>
</g>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate font-sans">North Star Metrics.csv</p>
<p class="text-xs text-stone-500 fontans">2 hours ago</p>
</div>
</a>
</div>
</div>
</nav>
<div class="p-6 border-t animate-fade-in-up delay-300 border-stone-900/80 bg-black/60">
<div
class="flex items-center gap-3 p-3 rounded-xl transition-colors cursor-pointer bg-stone-950 hover:bg-stone-900 border border-stone-800/80">
<div class="relative">
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=800&q=80" alt="Jamie Cole" class="h-10 w-10 rounded-full object-cover border border-stone-700/90">
<div class="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 bg-emerald-400 border-2 rounded-full border-black">
</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate text-stone-100 font-sans">Jamie Cole</p>
<p class="text-xs text-stone-500 truncate font-sans">Product Lead</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24"
data-icon="solar:menu-dots-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-stone-500 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" class="">
</path>
<path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5" class=""></path>
</svg>
</div>
</div>
<!-- Sidebar JS -->
<script>
(function initWorkspaceSidebar(root) {
if (!root) return;
const accordionButtons = root.querySelectorAll('[data-accordion-btn]');
accordionButtons.forEach(btn => {
btn.addEventListener('click', function () {
const content = this.nextElementSibling;
const chevron = this.querySelector('[data-chevron]');
const isOpen = !content.classList.contains('hidden');
content.classList.toggle('hidden', isOpen);
if (chevron) {
chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
}
});
});
const searchInput = root.querySelector('#searchLight');
if (searchInput) {
const wrapper = searchInput.parentElement;
searchInput.addEventListener('focus', function () {
wrapper.classList.add('ring-2', 'ring-indigo-500', 'ring-offset-2', 'ring-offset-black');
});
searchInput.addEventListener('blur', function () {
wrapper.classList.remove('ring-2', 'ring-indigo-500', 'ring-offset-2', 'ring-offset-black');
});
}
})(document.getElementById('workspace-sidebar'));
</script>
</aside>
<!-- ========== CONTROL PANEL SIDEBAR (CARD 2) ========== -->
<aside id="control-sidebar"
class="relative flex flex-col w-full md:w-80 h-[720px] md:h-[800px] backdrop-blur-xl rounded-2xl shadow-2xl shadow-black/30 border overflow-hidden animate-fade-in-right bg-orange-100/95 border-orange-300/70 text-stone-900">
<!-- Header -->
<div
class="flex items-center justify-between h-20 px-6 border-b animate-fade-in-up delay-100 border-orange-300/70 bg-orange-100/80">
<div class="flex items-center gap-3">
<div
class="flex bg-gradient-to-br from-pink-500 to-orange-400 w-8 h-8 border-white/40 rounded-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
viewBox="0 0 24 24" data-icon="solar:shield-check-bold-duotone" data-width="18" data-height="18"
class="iconify-inline text-black iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M3.378 5.082C3 5.62 3 7.22 3 10.417v1.574c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473c1.02 0 1.38-.158 2.101-.473C16.761 20.365 21 17.63 21 11.991v-1.574c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081l-.573-.196C13.595 2.268 12.812 2 12 2s-1.595.268-3.162.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M15.06 10.5a.75.75 0 0 0-1.12-1l-3.011 3.374l-.87-.974a.75.75 0 0 0-1.118 1l1.428 1.6a.75.75 0 0 0 1.119 0z"
class=""></path>
</svg>
</div>
<div class="">
<h1 class="text-lg font-semibold tracking-tight font-sans">Ops Console</h1>
<p class="text-xs text-stone-600 font-sans">Production Stack</p>
</div>
</div>
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full animate-pulse bg-emerald-500 border border-emerald-100/80"></div>
<span class="text-xs text-stone-600 font-sans">Stable</span>
</div>
</div>
<!-- Quick Stats -->
<div class="px-6 py-4 animate-fade-in-up delay-200 border-b border-orange-300/60 bg-orange-100/70">
<div class="grid grid-cols-3 gap-3">
<div class="rounded-lg p-3 border bg-orange-200/60 border-orange-300/80">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:cpu-bolt-bold-duotone" data-width="14" data-height="14"
class="iconify-inline text-pink-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M9.18 9.18c.054-.052.149-.118.451-.159c.323-.043.761-.044 1.439-.044h1.86c.678 0 1.116.001 1.438.044c.303.041.398.107.45.16c.054.053.12.148.16.45c.044.323.045.761.045 1.439v1.86c0 .678-.001 1.116-.045 1.438c-.04.303-.106.398-.16.45c-.052.054-.147.12-.45.16c-.322.044-.76.045-1.438.045h-1.86c-.678 0-1.116-.001-1.439-.045c-.302-.04-.397-.106-.45-.16c-.053-.052-.119-.147-.16-.45c-.043-.322-.044-.76-.044-1.438v-1.86c0-.678.001-1.116.044-1.439c.041-.302.107-.397.16-.45"
opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd"
d="M12.698 2.698a.698.698 0 0 0-1.396 0v2.79q-.764 0-1.395.017V2.698a.698.698 0 0 0-1.395 0v2.79q0 .056.008.108c-.936.115-1.585.353-2.078.846s-.731 1.142-.846 2.078a1 1 0 0 0-.108-.008h-2.79a.698.698 0 0 0 0 1.395h2.807q-.016.63-.016 1.395H2.698a.698.698 0 0 0 0 1.396h2.79q0 .764.017 1.395H2.698a.698.698 0 0 0 0 1.395h2.79a1 1 0 0 0 .108-.008c.115.936.353 1.585.846 2.078s1.142.731 2.078.846a1 1 0 0 0-.008.108v2.79a.698.698 0 0 0 1.395 0v-2.807q.63.016 1.395.016v2.791a.698.698 0 0 0 1.396 0v-2.79q.764 0 1.395-.017v2.807a.698.698 0 0 0 1.395 0v-2.79a1 1 0 0 0-.008-.108c.936-.115 1.585-.353 2.078-.846s.731-1.142.846-2.078q.053.009.108.008h2.79a.698.698 0 0 0 0-1.395h-2.807q.016-.63.016-1.395h2.791a.698.698 0 0 0 0-1.396h-2.79q0-.764-.017-1.395h2.807a.698.698 0 0 0 0-1.395h-2.79a1 1 0 0 0-.108.008c-.115-.936-.353-1.585-.846-2.078s-1.142-.731-2.078-.846a1 1 0 0 0 .008-.108v-2.79a.698.698 0 0 0-1.395 0v2.807a56 56 0 0 0-1.395-.016zm-3.252 4.94c.426-.057.96-.057 1.578-.057h1.952c.619 0 1.151 0 1.578.058c.458.061.896.2 1.252.555c.355.356.494.794.555 1.252c.058.426.058.96.058 1.578v1.952c0 .619 0 1.151-.058 1.578c-.061.458-.2.896-.555 1.252c-.356.355-.794.494-1.252.555c-.427.058-.96.058-1.578.058h-1.952c-.619 0-1.152 0-1.578-.058c-.458-.061-.896-.2-1.252-.555c-.355-.356-.494-.794-.555-1.252c-.058-.427-.058-.96-.058-1.578v-1.952c0-.619 0-1.152.058-1.578c.061-.458.2-.896.555-1.252c.356-.355.794-.494 1.252-.555"
clip-rule="evenodd" class=""></path>
<path fill="currentColor"
d="M12.966 10.545a.698.698 0 0 0-1.135-.811l-1.329 1.86a.698.698 0 0 0 .568 1.103h.505l-.541.758a.698.698 0 1 0 1.135.81l1.329-1.86a.698.698 0 0 0-.568-1.103h-.505z"
class=""></path>
</svg>
<span class="text-xs text-stone-600 font-sans">CPU</span>
</div>
<p class="text-lg font-semibold text-black font-sans">41%</p>
</div>
<div class="rounded-lg p-3 border bg-orange-200/60 border-orange-300/80">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:server-2-bold-duotone" data-width="14" data-height="14"
class="iconify-inline text-red-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M6 13h12c1.886 0 2.828 0 3.414.586S22 15.114 22 17s0 2.828-.586 3.414S19.886 21 18 21H6c-1.886 0-2.828 0-3.414-.586S2 18.886 2 17s0-2.828.586-3.414S4.114 13 6 13M6 3h12c1.886 0 2.828 0 3.414.586S22 5.114 22 7s0 2.828-.586 3.414S19.886 11 18 11H6c-1.886 0-2.828 0-3.414-.586S2 8.886 2 7s0-2.828.586-3.414S4.114 3 6 3"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M12.75 7a.75.75 0 0 1 .75-.75H18a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75M6 8.75A.75.75 0 0 1 5.25 8V6a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75m3 0A.75.75 0 0 1 8.25 8V6a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75M12.75 17a.75.75 0 0 1 .75-.75H18a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75M6 18.75a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75m3 0a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75"
class=""></path>
</svg>
<span class="text-xs text-stone-600 font-sans">Memory</span>
</div>
<p class="text-lg font-semibold text-black font-sans">72%</p>
</div>
<div class="rounded-lg p-3 border bg-orange-200/60 border-orange-300/80">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:chart-2-bold-duotone" data-width="14" data-height="14"
class="iconify-inline text-red-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M3.293 9.293C3 9.586 3 10.057 3 11v6c0 .943 0 1.414.293 1.707S4.057 19 5 19s1.414 0 1.707-.293S7 17.943 7 17v-6c0-.943 0-1.414-.293-1.707S5.943 9 5 9s-1.414 0-1.707.293"
class=""></path>
<path fill="currentColor"
d="M17.293 2.293C17 2.586 17 3.057 17 4v13c0 .943 0 1.414.293 1.707S18.057 19 19 19s1.414 0 1.707-.293S21 17.943 21 17V4c0-.943 0-1.414-.293-1.707S19.943 2 19 2s-1.414 0-1.707.293"
opacity=".4" class=""></path>
<path fill="currentColor"
d="M10 7c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17z"
opacity=".7" class=""></path>
<path fill="currentColor" d="M3 21.25a.75.75 0 0 0 0 1.5h18a.75.75 0 0 0 0-1.5z" class=""></path>
</svg>
<span class="text-xs text-stone-600 font-sans">Load</span>
</div>
<p class="text-lg font-semibold text-black font-sans">0.87</p>
</div>
</div>
</div>
<!-- Navigation -->
<nav
class="flex-1 px-6 overflow-y-auto custom-scrollbar custom-scrollbar-dark animate-fade-in-up delay-300 pt-4 pb-4 divide-y divide-orange-300/60">
<!-- System -->
<div class="space-y-1 pb-5">
<h2 class="text-xs font-medium uppercase tracking-wider mb-3 text-stone-600 font-sans">System</h2>
<a href="#"
class="group flex items-center gap-3 h-11 px-3 rounded-xl bg-pink-500/10 border border-pink-500/30 transition-all duration-200 text-pink-600">
<div class="h-6 w-6 bg-pink-500/20 rounded-lg flex items-center justify-center border border-pink-500/40">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:server-path-bold-duotone" data-width="16" data-height="16"
class="iconify-inline iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor" fill-rule="evenodd"
d="M11.302 13.737h7.209c1.541 0 2.79-1.202 2.79-2.684s-1.248-2.685-2.79-2.685c1.541 0 2.79-1.201 2.79-2.684c0-1.482-1.248-2.684-2.79-2.684H5.488c-1.541 0-2.79 1.202-2.79 2.684s1.249 2.684 2.79 2.684c-1.541 0-2.79 1.202-2.79 2.685c0 1.482 1.249 2.684 2.79 2.684zm1.628-8.724c-.386 0-.698.3-.698.671c0 .37.313.671.698.671h5.581c.386 0 .698-.3.698-.67a.685.685 0 0 0-.698-.672zm0 5.369c-.386 0-.698.3-.698.67s.313.672.698.672h5.581c.386 0 .698-.3.698-.671a.685.685 0 0 0-.698-.671zM7.348 5.684c0 .494-.416.895-.93.895s-.93-.4-.93-.895c0-.494.416-.895.93-.895s.93.401.93.895m0 5.369c0 .494-.416.894-.93.894s-.93-.4-.93-.894c0-.495.416-.895.93-.895s.93.4.93.895"
clip-rule="evenodd" class=""></path>
<path fill="currentColor"
d="M22 18.211a.685.685 0 0 0-.698-.671h-7.577a1.83 1.83 0 0 0-1.027-.988v-2.815h-1.396v2.815c-.466.181-.838.54-1.027.988H2.698c-.386 0-.698.3-.698.671c0 .37.312.671.698.671h7.577A1.86 1.86 0 0 0 12 20c.78 0 1.45-.462 1.725-1.118h7.577c.386 0 .698-.3.698-.671"
opacity=".6" class=""></path>
</svg>
</div>
<span class="text-sm font-medium font-sans">Cluster View</span>
<div class="ml-auto">
<div class="h-2 w-2 rounded-full animate-pulse bg-pink-600 border border-pink-200/80"></div>
</div>
</a>
<!-- Monitoring Accordion -->
<div class="">
<button data-accordion-btn-dark="" class="group w-full flex items-center gap-3 h-11 px-3 rounded-xl transition-all duration-200 hover:bg-orange-200/60 border border-transparent hover:border-orange-300/80">
<div class="h-6 w-6 rounded-lg flex items-center justify-center bg-orange-300 border border-orange-400/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:graph-new-bold-duotone" data-width="16" data-height="16" class="iconify-inline text-stone-700 iconify iconify--solar" style="vertical-align: -0.125em;"><path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".5" class=""></path><path fill="currentColor" d="M17.576 10.48a.75.75 0 0 0-1.152-.96l-1.797 2.156c-.37.445-.599.716-.786.885a.8.8 0 0 1-.163.122l-.011.005l-.008-.004l-.003-.001a.8.8 0 0 1-.164-.122c-.187-.17-.415-.44-.786-.885l-.292-.35c-.328-.395-.625-.75-.901-1c-.301-.272-.68-.514-1.18-.514s-.878.242-1.18.514c-.276.25-.572.605-.9 1l-1.83 2.194a.75.75 0 0 0 1.153.96l1.797-2.156c.37-.445.599-.716.786-.885a.8.8 0 0 1 .163-.122l.007-.003l.004-.001q.004 0 .011.004a.8.8 0 0 1 .164.122c.187.17.415.44.786.885l.292.35c.329.395.625.75.901 1c.301.272.68.514 1.18.514s.878-.242 1.18-.514c.276-.25.572-.605.9-1zM22 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0" class=""></path></svg>
</div>
<span class="flex-1 text-sm font-medium text-left font-sans">Monitoring</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-linear" data-width="16" data-height="16" data-chevron-dark="" class="iconify-inline text-stone-600 transition-transform duration-200 iconify iconify--solar" style="vertical-align: -0.125em;"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m19 9l-7 6l-7-6" class=""></path></svg>
</button>
<div data-accordion-content-dark="" class="ml-9 mt-2 space-y-1 hidden">
<a href="#"
class="flex items-center gap-3 h-9 px-3 rounded-lg transition-colors hover:bg-orange-200/60 border border-transparent hover:border-orange-300/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:database-bold-duotone" data-width="14" data-height="14"
class="iconify-inline text-red-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor" d="M12 10c4.418 0 8-1.79 8-4s-3.582-4-8-4s-8 1.79-8 4s3.582 4 8 4" class="">
</path>
<path fill="currentColor" d="M4 12v6c0 2.21 3.582 4 8 4s8-1.79 8-4v-6c0 2.21-3.582 4-8 4s-8-1.79-8-4"
opacity=".5" class=""></path>
<path fill="currentColor" d="M4 6v6c0 2.21 3.582 4 8 4s8-1.79 8-4V6c0 2.21-3.582 4-8 4S4 8.21 4 6"
opacity=".7" class=""></path>
</svg>
<span class="text-sm text-stone-700 font-sans">Datastores</span>
<span class="ml-auto text-xs text-emerald-600 font-sans">Nominal</span>
</a>
<a href="#"
class="flex items-center gap-3 h-9 px-3 rounded-lg transition-colors hover:bg-orange-200/60 border border-transparent hover:border-orange-300/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:global-bold-duotone" data-width="14" data-height="14"
class="iconify-inline text-orange-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor" fill-rule="evenodd"
d="M2.028 11.25A10 10 0 0 1 12 2c-.83 0-1.57.364-2.18.921c-.605.554-1.116 1.328-1.53 2.242c-.416.92-.74 1.996-.959 3.163a20 20 0 0 0-.318 2.924zm0 1.5h4.985c.036 1.002.143 1.988.318 2.924c.22 1.167.543 2.243.959 3.163c.414.914.925 1.688 1.53 2.242c.61.557 1.35.921 2.18.921c-5.27 0-9.589-4.077-9.972-9.25"
clip-rule="evenodd" class=""></path>
<path fill="currentColor"
d="M12 2c.831 0 1.57.364 2.18.921c.605.554 1.117 1.328 1.53 2.242c.417.92.74 1.996.959 3.163c.175.936.282 1.922.318 2.924h4.985A10 10 0 0 0 12 2m4.669 13.674c-.219 1.167-.542 2.243-.959 3.163c-.413.914-.925 1.688-1.53 2.242c-.61.557-1.349.921-2.18.921c5.27 0 9.589-4.077 9.972-9.25h-4.985a20 20 0 0 1-.318 2.924"
class=""></path>
<path fill="currentColor"
d="M12 3.396c-.275 0-.63.117-1.043.495c-.416.38-.833.977-1.201 1.79c-.366.808-.663 1.784-.867 2.873c-.16.859-.26 1.768-.296 2.696h6.814a18.5 18.5 0 0 0-.296-2.696c-.204-1.09-.5-2.065-.867-2.872c-.368-.814-.784-1.41-1.2-1.791c-.414-.378-.769-.495-1.044-.495m-3.111 12.05c.204 1.09.501 2.065.867 2.873c.368.813.785 1.41 1.2 1.79c.414.379.77.496 1.044.496c.275 0 .63-.117 1.044-.495c.416-.381.832-.978 1.2-1.791c.366-.808.663-1.783.867-2.873c.161-.858.261-1.768.296-2.696H8.593c.035.928.135 1.838.296 2.696"
opacity=".5" class=""></path>
</svg>
<span class="text-sm text-stone-700 font-sans">Edge Network</span>
<span class="ml-auto text-xs text-yellow-600 font-sans">Degraded</span>
</a>
<a href="#"
class="flex items-center gap-3 h-9 px-3 rounded-lg transition-colors hover:bg-orange-200/60 bg-orange-200/40 border border-orange-300/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14"
viewBox="0 0 24 24" data-icon="solar:document-text-bold-duotone" data-width="14" data-height="14"
class="iconify-inline text-pink-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z"
opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd"
d="M7.25 12a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0-4A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8m0 8a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"
clip-rule="evenodd" class=""></path>
</svg>
<span class="text-sm font-medium text-stone-800 font-sans">Audit Logs</span>
<span class="ml-auto text-xs text-red-600 font-sans">5 Issues</span>
</a>
</div>
</div>
<a href="#"
class="group flex items-center gap-3 h-11 px-3 rounded-xl transition-all duration-200 hover:bg-orange-200/60 border border-transparent hover:border-orange-300/80">
<div class="h-6 w-6 rounded-lg flex items-center justify-center bg-orange-300 border border-orange-400/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:settings-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-stone-700 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor" fill-rule="evenodd"
d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083"
clip-rule="evenodd" opacity=".5" class=""></path>
<path fill="currentColor"
d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3" class="">
</path>
</svg>
</div>
<span class="text-sm font-medium font-sans">Runtime Config</span>
</a>
</div>
<!-- Alerts -->
<div class="py-5">
<div class="flex items-center justify-between mb-3">
<h2 class="text-xs font-medium uppercase tracking-wider text-stone-600 font-sans">Active Alerts</h2>
<span class="h-5 px-2 bg-red-500/20 rounded-full text-xs font-medium text-red-600 border border-red-500/40 font-sans">4</span>
</div>
<div class="space-y-2">
<div class="p-3 bg-red-500/10 border border-red-500/40 rounded-lg">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:danger-triangle-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-red-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M12 3c-2.31 0-3.77 2.587-6.688 7.762l-.364.644c-2.425 4.3-3.638 6.45-2.542 8.022S6.214 21 11.636 21h.728c5.422 0 8.134 0 9.23-1.572s-.117-3.722-2.542-8.022l-.364-.645C15.77 5.587 14.311 3 12 3"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
class=""></path>
</svg>
<span class="text-sm font-medium text-red-600 font-sans">Critical</span>
</div>
<p class="text-xs text-stone-700 font-sans">Latency spike in EU-West gateway</p>
<p class="text-xs text-stone-500 mt-1 font-sans">3 minutes ago</p>
</div>
<div class="p-3 bg-yellow-500/10 border border-yellow-500/40 rounded-lg">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16"
viewBox="0 0 24 24" data-icon="solar:danger-circle-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-yellow-600 iconify iconify--solar" style="vertical-align: -0.125em;">
<path fill="currentColor" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M12 6.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
class=""></path>
</svg>
<span class="text-sm font-medium text-yellow-600 font-sans">Warning</span>
</div>
<p class="text-xs text-stone-700 font-sans">Error rate slightly above baseline</p>
<p class="text-xs text-stone-500 mt-1 font-sans">11 minutes ago</p>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="pt-5">
<h2 class="text-xs font-medium uppercase tracking-wider mb-3 text-stone-600 font-sans">Quick Actions</h2>
<div class="space-y-2">
<button class="w-full h-10 bg-gradient-to-r hover:from-pink-500 hover:to-orange-500 rounded-lg text-sm font-medium transition-all duration-200 hover:shadow-lg from-pink-400 to-orange-400 font-sans border border-pink-400/60">
Apply Hotfix
</button>
<button class="w-full h-10 border rounded-lg text-sm font-medium transition-colors bg-orange-200 hover:bg-orange-300 border-orange-400 font-sans">
Drain Traffic
</button>
</div>
</div>
</nav>
<!-- Admin Profile -->
<div class="p-6 border-t animate-fade-in-up delay-300 border-orange-300/70 bg-orange-100/80">
<div
class="flex items-center gap-3 p-3 rounded-xl transition-colors cursor-pointer bg-orange-200/60 hover:bg-orange-200 border border-orange-300/80">
<div class="relative">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?w=800&q=80" alt="Riley Morgan" class="h-10 w-10 rounded-full object-cover border border-orange-300/90">
<div class="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 border-2 rounded-full bg-pink-600 border-orange-100">
</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate text-black font-sans">Riley Morgan</p>
<p class="text-xs truncate text-stone-600 font-sans">Site Reliability Lead</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24"
data-icon="solar:logout-2-bold-duotone" data-width="16" data-height="16"
class="iconify-inline text-stone-600 hover:text-stone-700 iconify iconify--solar"
style="vertical-align: -0.125em;">
<path fill="currentColor"
d="M16 2h-1c-2.829 0-4.242 0-5.121.879S9 5.172 9 8v8c0 2.829 0 4.243.879 5.122c.878.878 2.292.878 5.119.878H16c2.828 0 4.242 0 5.121-.879C22 20.243 22 18.828 22 16V8c0-2.828 0-4.243-.879-5.121S18.828 2 16 2"
opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd"
d="M15.75 12a.75.75 0 0 0-.75-.75H4.027l1.961-1.68a.75.75 0 1 0-.976-1.14l-3.5 3a.75.75 0 0 0 0 1.14l3.5 3a.75.75 0 1 0 .976-1.14l-1.96-1.68H15a.75.75 0 0 0 .75-.75"
clip-rule="evenodd" class=""></path>
</svg>
</div>
</div>
<!-- Sidebar JS -->
<script>
(function initControlSidebar(root) {
if (!root) return;
const accordionButtons = root.querySelectorAll('[data-accordion-btn-dark]');
accordionButtons.forEach(btn => {
btn.addEventListener('click', function () {
const content = this.nextElementSibling;
const chevron = this.querySelector('[data-chevron-dark]');
const isOpen = !content.classList.contains('hidden');
content.classList.toggle('hidden', isOpen);
if (chevron) {
chevron.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
}
});
});
})(document.getElementById('control-sidebar'));
</script>
</aside>
</main>