Загрузка...
Адаптивная боковая панель Tailwind CSS для авиационных дашбордов. Переключатель рабочих пространств, навигация, списки рейсов, действия, статусы. Синхронизированные светлая и темная темы.
<main
class="flex flex-col sm:flex-row gap-6 sm:gap-10 w-full max-w-6xl mr-auto ml-auto gap-x-6 gap-y-6 items-start justify-center m-12">
<!-- Light theme sidebar -->
<aside class="sidebar beautiful-shadow overflow-hidden bg-white rounded-2xl border border-zinc-200">
<!-- Workspace header -->
<div class="flex items-center justify-between border-b pt-5 pr-5 pb-5 pl-5 border-zinc-100">
<button id="workspaceBtn" class="flex items-center gap-2 beautiful-shadow hover:shadow-md transition-all text-sm font-semibold bg-gradient-to-r from-sky-50 to-blue-50 border-sky-200 border rounded-xl pt-2.5 pr-4 pb-2.5 pl-4">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:airplane-fill" class="iconify w-4 h-4 text-sky-600 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M19.71 2.837c.733.147 1.306.72 1.453 1.453a3.56 3.56 0 0 1-.773 2.995l-2.751 3.252l1.944 7.131a1.25 1.25 0 0 1-.322 1.213l-1.302 1.302a1.01 1.01 0 0 1-1.597-.224l-2.993-5.387l-3.258 2.255v.787c0 .331-.132.65-.366.884L8.062 20.18a1.01 1.01 0 0 1-1.673-.395l-.544-1.631l-1.631-.544a1.01 1.01 0 0 1-.395-1.673l1.683-1.683a1.25 1.25 0 0 1 .884-.366h.787l2.255-3.258l-5.387-2.993a1.01 1.01 0 0 1-.224-1.597l1.302-1.302a1.25 1.25 0 0 1 1.213-.322l7.13 1.944l3.253-2.751a3.56 3.56 0 0 1 2.995-.773Z" class=""></path></g></svg>
<span class="text-zinc-800">SkyFlow</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:down-line" class="iconify w-4 h-4 text-zinc-500 iconify--mingcute"><g fill="none" fill-rule="evenodd" class=""><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" class=""></path></g></svg>
</button>
<div class="relative">
<img src="https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?w=1080&q=80" class="w-10 h-10 rounded-xl object-cover border-2 beautiful-shadow border-zinc-200" alt="Pilot Avatar">
<div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-white pulse-dot"></div>
</div>
</div>
<!-- Workspace dropdown -->
<div id="workspaceMenu"
class="mx-5 mt-2 rounded-xl bg-gradient-to-br to-sky-50 beautiful-shadow border p-5 text-sm hidden from-zinc-50 border-zinc-200">
<div class="mb-4 pb-4 border-b border-zinc-200">
<p class="font-semibold text-zinc-800">Captain Sarah Mitchell</p>
<p class="text-xs mt-1 text-zinc-500">sarah.mitchell@skyflow.aero</p>
<div class="flex items-center gap-2 mt-2">
<div class="w-2 h-2 bg-green-400 rounded-full pulse-dot"></div>
<span class="text-xs text-zinc-600">Active - Ready for Flight</span>
</div>
</div>
<button class="flex items-center gap-3 w-full py-2.5 px-2 rounded-lg hover:bg-white/60 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:airplane-fill" class="iconify w-4 h-4 text-sky-600 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M19.71 2.837c.733.147 1.306.72 1.453 1.453a3.56 3.56 0 0 1-.773 2.995l-2.751 3.252l1.944 7.131a1.25 1.25 0 0 1-.322 1.213l-1.302 1.302a1.01 1.01 0 0 1-1.597-.224l-2.993-5.387l-3.258 2.255v.787c0 .331-.132.65-.366.884L8.062 20.18a1.01 1.01 0 0 1-1.673-.395l-.544-1.631l-1.631-.544a1.01 1.01 0 0 1-.395-1.673l1.683-1.683a1.25 1.25 0 0 1 .884-.366h.787l2.255-3.258l-5.387-2.993a1.01 1.01 0 0 1-.224-1.597l1.302-1.302a1.25 1.25 0 0 1 1.213-.322l7.13 1.944l3.253-2.751a3.56 3.56 0 0 1 2.995-.773Z" class=""></path></g></svg>
<span class="font-medium">SkyFlow Airlines</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:check-2-fill" class="iconify w-4 h-4 ml-auto text-green-600 iconify--mingcute"><g fill="none" fill-rule="evenodd" class=""><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M19.495 3.133a1 1 0 0 1 1.352.309l.99 1.51a1 1 0 0 1-.155 1.279l-.003.004l-.014.013l-.057.053l-.225.215a84 84 0 0 0-3.62 3.736c-2.197 2.416-4.806 5.578-6.562 8.646c-.49.856-1.687 1.04-2.397.301l-6.485-6.738a1 1 0 0 1 .051-1.436l1.96-1.768A1 1 0 0 1 5.6 9.2l3.309 2.481c5.169-5.097 8.1-7.053 10.586-8.548" class=""></path></g></svg>
</button>
<button class="flex items-center gap-3 w-full py-2.5 px-2 rounded-lg hover:bg-white/60 transition-colors">
<span class="iconify w-4 h-4 text-orange-600" data-icon="mingcute:ship-2-fill"></span>
<span>Cargo Express</span>
</button>
<button class="flex items-center gap-3 w-full py-2.5 px-2 rounded-lg hover:bg-white/60 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:radar-fill" class="iconify w-4 h-4 text-purple-600 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M4.575 4.575a1.5 1.5 0 1 1 2.122 2.122A7.47 7.47 0 0 0 4.5 12a7.47 7.47 0 0 0 2.197 5.303a1.5 1.5 0 1 1-2.122 2.122A10.47 10.47 0 0 1 1.5 12c0-2.9 1.177-5.526 3.075-7.425m12.728 0a1.5 1.5 0 0 1 2.122 0A10.47 10.47 0 0 1 22.5 12c0 2.9-1.177 5.526-3.075 7.425a1.5 1.5 0 1 1-2.122-2.122A7.47 7.47 0 0 0 19.5 12a7.47 7.47 0 0 0-2.197-5.303a1.5 1.5 0 0 1 0-2.122M9.525 7.404a1.5 1.5 0 0 1 0 2.121A3.48 3.48 0 0 0 8.5 12c0 .912.347 1.741.92 2.365l.148.152a1.5 1.5 0 1 1-2.085 2.157A6.5 6.5 0 0 1 5.5 12c0-1.794.73-3.422 1.904-4.596a1.5 1.5 0 0 1 2.121 0m7.114.043A6.48 6.48 0 0 1 18.5 12c0 1.794-.73 3.422-1.904 4.596a1.5 1.5 0 1 1-2.121-2.121A3.48 3.48 0 0 0 15.5 12c0-.955-.38-1.819-1.002-2.452a1.5 1.5 0 1 1 2.14-2.101ZM12 10a2 2 0 1 1 0 4a2 2 0 0 1 0-4" class=""></path></g></svg>
<span>Charter Wings</span>
</button>
<hr class="my-4 border-zinc-200">
<button class="flex items-center gap-3 w-full py-2.5 px-2 rounded-lg hover:bg-white/60 transition-colors text-zinc-600">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:settings-3-line" class="iconify w-4 h-4 iconify--mingcute"><g fill="none" fill-rule="evenodd" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M14.035 2.809c.37-.266.89-.39 1.401-.203a10 10 0 0 1 2.982 1.725c.417.35.57.861.524 1.313c-.075.753.057 1.48.42 2.106c.32.557.802.997 1.39 1.307l.225.11c.414.187.782.576.875 1.113a10 10 0 0 1 0 3.44c-.083.484-.39.847-.753 1.051l-.122.063c-.69.31-1.254.79-1.616 1.416c-.362.627-.494 1.353-.419 2.106c.045.452-.107.964-.524 1.313a10 10 0 0 1-2.982 1.725a1.51 1.51 0 0 1-1.4-.203C13.42 20.75 12.723 20.5 12 20.5s-1.42.249-2.035.691a1.51 1.51 0 0 1-1.401.203a10 10 0 0 1-2.982-1.725a1.51 1.51 0 0 1-.524-1.313c.075-.753-.058-1.48-.42-2.106a3.4 3.4 0 0 0-1.39-1.307l-.225-.11a1.51 1.51 0 0 1-.875-1.113a10 10 0 0 1 0-3.44c.083-.484.39-.847.753-1.051l.122-.062c.69-.311 1.254-.79 1.616-1.417c.361-.626.494-1.353.419-2.106a1.51 1.51 0 0 1 .524-1.313a10 10 0 0 1 2.982-1.725a1.51 1.51 0 0 1 1.4.203c.615.442 1.312.691 2.036.691s1.42-.249 2.035-.691m.957 1.769c-.866.57-1.887.922-2.992.922s-2.126-.353-2.992-.922A8 8 0 0 0 7.068 5.7c.06 1.033-.145 2.093-.697 3.05c-.553.956-1.368 1.663-2.293 2.128a8 8 0 0 0 0 2.242c.925.465 1.74 1.172 2.293 2.13c.552.955.757 2.015.697 3.048a8 8 0 0 0 1.94 1.123c.866-.57 1.887-.922 2.992-.922s2.126.353 2.992.922a8 8 0 0 0 1.94-1.122c-.06-1.034.145-2.094.697-3.05c.552-.957 1.368-1.664 2.293-2.13a8 8 0 0 0 0-2.24c-.925-.466-1.74-1.173-2.293-2.13c-.552-.956-.757-2.016-.697-3.05a8 8 0 0 0-1.94-1.122ZM12 8a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" class=""></path></g></svg>
Flight Settings
</button>
<button class="flex items-center gap-3 w-full py-2.5 px-2 rounded-lg hover:bg-white/60 transition-colors text-red-600">
<span class="iconify w-4 h-4" data-icon="mingcute:logout-line"></span>
Sign Out
</button>
</div>
<!-- Nav -->
<nav class="select-none text-sm pt-6 pr-2 pl-2">
<a href="#"
class="flex items-center gap-3 px-4 py-3 mx-2 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:layout-3-fill" class="iconify w-5 h-5 iconify--mingcute">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M3 5a2 2 0 0 1 2-2h6v18H5a2 2 0 0 1-2-2zm10 16h6a2 2 0 0 0 2-2v-6h-8zm0-10h8V5a2 2 0 0 0-2-2h-6z"
class=""></path>
</g>
</svg>
Flight Dashboard
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-3 mx-2 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:user-4-fill" class="iconify w-5 h-5 iconify--mingcute">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2M8.5 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0m9.758 7.484A7.99 7.99 0 0 1 12 20a7.99 7.99 0 0 1-6.258-3.016C7.363 15.821 9.575 15 12 15s4.637.821 6.258 1.984"
class=""></path>
</g>
</svg>
Flight Crew
<span class="ml-auto bg-sky-100 text-sky-800 text-xs px-2 py-1 rounded-full font-medium">6</span>
</a>
<!-- Active Flights -->
<div class="px-4 mt-6">
<button id="flightsToggleLight" class="flex items-center gap-2 w-full uppercase text-xs tracking-wider font-semibold mb-3 text-zinc-500">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:down-line" class="iconify w-4 h-4 transition-transform iconify--mingcute"><g fill="none" fill-rule="evenodd" class=""><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" class=""></path></g></svg>
Active Flights
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:add-line" class="iconify w-4 h-4 ml-auto rounded p-0.5 transition-colors hover:bg-zinc-200 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M11 20a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2h-7V4a1 1 0 1 0-2 0v7H4a1 1 0 1 0 0 2h7z" class=""></path></g></svg>
</button>
<div id="flightsListLight" class="space-y-1">
<button class="flex items-center gap-3 w-full beautiful-shadow text-white bg-gradient-to-br from-sky-400 to-blue-500 rounded-xl pt-3 pr-4 pb-3 pl-4 border border-sky-300/70">
<span class="w-2 h-2 rounded-full bg-white pulse-dot"></span>
<div class="flex flex-col items-start">
<span class="font-medium">SF-2847 JFK→LAX</span>
<span class="text-xs text-sky-100">Boeing 737-800</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:star-fill" class="iconify w-4 h-4 ml-auto iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z" class=""></path></g></svg>
</button>
<a href="#"
class="block pl-9 py-2 rounded-lg transition-colors text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50 border border-transparent hover:border-zinc-200">Pre-Flight
Check</a>
<a href="#"
class="block pl-9 py-2 rounded-lg transition-colors text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50 border border-transparent hover:border-zinc-200">Weather
Brief</a>
<a href="#"
class="block pl-9 py-2 rounded-lg transition-colors text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50 border border-transparent hover:border-zinc-200">Flight
Plan</a>
<button class="flex items-center gap-3 w-full px-4 py-3 mt-2 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<div class="flex flex-col items-start">
<span>SF-1203 ORD→MIA</span>
<span class="text-xs text-zinc-500">Airbus A320</span>
</div>
<div class="ml-auto flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
<span class="text-xs text-zinc-500">2h</span>
</div>
</button>
<button class="flex items-center gap-3 w-full px-4 py-3 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
<div class="flex flex-col items-start">
<span class="">SF-0567 SEA→DEN</span>
<span class="text-xs text-zinc-500">Boeing 777-200</span>
</div>
<span class="ml-auto text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded-full">Delayed</span>
</button>
<button class="flex items-center gap-3 w-full px-4 py-3 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<span class="w-2 h-2 rounded-full bg-red-500"></span>
<div class="flex flex-col items-start">
<span>SF-9122 ATL→PHX</span>
<span class="text-xs text-zinc-500">Boeing 737 MAX</span>
</div>
<span class="ml-auto text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Alert</span>
</button>
</div>
</div>
<!-- Quick Actions -->
<div class="px-4 mt-6 pb-6">
<p class="uppercase text-xs tracking-wider font-semibold mb-3 text-zinc-500">Operations</p>
<div class="space-y-1">
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:calendar-line" class="iconify w-4 h-4 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M16 3a1 1 0 0 1 .993.883L17 4v1h2a2 2 0 0 1 1.995 1.85L21 7v12a2 2 0 0 1-1.85 1.995L19 21H5a2 2 0 0 1-1.995-1.85L3 19V7a2 2 0 0 1 1.85-1.995L5 5h2V4a1 1 0 0 1 1.993-.117L9 4v1h6V4a1 1 0 0 1 1-1m3 9H5v7h14zm0-5H5v3h14z"
class=""></path>
</g>
</svg>
Schedule Flight
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:tool-fill" class="iconify w-4 h-4 iconify--mingcute">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M7.527 2.657a7.001 7.001 0 0 1 8.26 9.347l4.599 3.893a3.3 3.3 0 1 1-4.651 4.65l-3.891-4.597a7.001 7.001 0 0 1-9.35-8.26a1.01 1.01 0 0 1 1.72-.432l3.045 3.307l2.297-.845l.847-2.3l-3.309-3.04a1.01 1.01 0 0 1 .433-1.723"
class=""></path>
</g>
</svg>
Maintenance Log
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors relative text-zinc-700 hover:bg-zinc-100 border border-transparent hover:border-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:alert-line" class="iconify w-4 h-4 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="m13.299 3.148l8.634 14.954a1.5 1.5 0 0 1-1.299 2.25H3.366a1.5 1.5 0 0 1-1.299-2.25l8.634-14.954c.577-1 2.02-1 2.598 0M12 4.898L4.232 18.352h15.536zM12 15a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-7a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1"
class=""></path>
</g>
</svg>
Flight Alerts
<span class="absolute right-4 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-red-500 pulse-dot"></span>
</a>
</div>
</div>
</nav>
</aside>
<!-- Dark theme sidebar -->
<aside class="sidebar beautiful-shadow-dark overflow-hidden bg-zinc-900 border border-zinc-700 rounded-2xl">
<!-- Workspace header -->
<div class="flex items-center justify-between p-5 border-b border-zinc-800">
<button class="flex items-center gap-2 transition-colors beautiful-shadow-dark text-sm font-semibold border rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 hover:bg-zinc-700 bg-zinc-800 border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:airplane-fill" class="iconify w-4 h-4 text-cyan-400 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M19.71 2.837c.733.147 1.306.72 1.453 1.453a3.56 3.56 0 0 1-.773 2.995l-2.751 3.252l1.944 7.131a1.25 1.25 0 0 1-.322 1.213l-1.302 1.302a1.01 1.01 0 0 1-1.597-.224l-2.993-5.387l-3.258 2.255v.787c0 .331-.132.65-.366.884L8.062 20.18a1.01 1.01 0 0 1-1.673-.395l-.544-1.631l-1.631-.544a1.01 1.01 0 0 1-.395-1.673l1.683-1.683a1.25 1.25 0 0 1 .884-.366h.787l2.255-3.258l-5.387-2.993a1.01 1.01 0 0 1-.224-1.597l1.302-1.302a1.25 1.25 0 0 1 1.213-.322l7.13 1.944l3.253-2.751a3.56 3.56 0 0 1 2.995-.773Z" class=""></path></g></svg>
<span class="text-white">SkyFlow</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:down-line" class="iconify w-4 h-4 text-zinc-400 iconify--mingcute"><g fill="none" fill-rule="evenodd" class=""><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" class=""></path></g></svg>
</button>
<div class="relative">
<img src="https://images.unsplash.com/photo-1502452213786-a5bc0a67e963?w=1080&q=80" class="w-10 h-10 rounded-xl object-cover border-2 beautiful-shadow-dark border-zinc-700" alt="Pilot Avatar">
<div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 pulse-dot border-zinc-900">
</div>
</div>
</div>
<!-- Nav -->
<nav class="select-none text-sm text-white pt-6 pr-2 pl-2">
<a href="#"
class="flex items-center gap-3 px-4 py-3 mx-2 bg-gradient-to-r from-cyan-600 to-blue-600 rounded-xl beautiful-shadow-dark border border-cyan-500/60">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:tower-fill" class="iconify w-5 h-5 iconify--mingcute">
<g fill="none" fill-rule="evenodd" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M12 2a1 1 0 0 1 .993.883L13 3v.723l.166.277H14a1 1 0 0 1 .445 1.896l-.113.047L15.566 8H17a1 1 0 0 1 .117 1.993L17 10h-1c.628.836 1 1.874 1 3a5 5 0 0 1-2 4a5 5 0 0 1 1.845 2.758L16.9 20H19a1 1 0 0 1 .117 1.993L19 22H5a1 1 0 0 1-.117-1.993L5 20h2.1A5 5 0 0 1 9 17a5 5 0 0 1-2-4c0-1.032.313-1.99.848-2.787L8 10H7a1 1 0 0 1-.117-1.993L7 8h1.434l1.234-2.057a1 1 0 0 1 .215-1.936L10 4h.834L11 3.723V3a1 1 0 0 1 1-1m.034 4h-.068l-1.2 2h2.468z"
class=""></path>
</g>
</svg>
<span class="font-medium">Control Tower</span>
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-3 mx-2 rounded-xl transition-colors hover:text-white hover:bg-zinc-800 text-zinc-300 border border-transparent hover:border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:folder-open-fill" class="iconify w-5 h-5 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M21.328 10a.5.5 0 0 1 .496.563l-.017.08l-2.89 9.644a1 1 0 0 1-.84.706L17.96 21H4a2 2 0 0 1-1.099-.328a.5.5 0 0 1-.026-.234l.017-.082l2.894-9.643a1 1 0 0 1 .839-.706L6.744 10zM9.52 3a2 2 0 0 1 1.443.614l.12.137L12.48 5.5H19a2 2 0 0 1 1.995 1.85L21 7.5V8H6.744A3 3 0 0 0 3.93 9.96l-.06.178L2 16.37V5a2 2 0 0 1 1.85-1.995L4 3z"
class=""></path>
</g>
</svg>
Flight Operations
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-3 mx-2 rounded-xl transition-colors hover:text-white hover:bg-zinc-800 text-zinc-300 border border-transparent hover:border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:user-setting-fill" class="iconify w-5 h-5 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M11 2a5 5 0 1 0 0 10a5 5 0 0 0 0-10m0 11c-2.395 0-4.575.694-6.178 1.672c-.8.488-1.484 1.064-1.978 1.69C2.358 16.976 2 17.713 2 18.5c0 .845.411 1.511 1.003 1.986c.56.45 1.299.748 2.084.956C6.665 21.859 8.771 22 11 22l.685-.005a1 1 0 0 0 .89-1.428A6 6 0 0 1 12 18c0-1.252.383-2.412 1.037-3.373a1 1 0 0 0-.72-1.557Q11.671 13 11 13m9.616 2.469a1 1 0 1 0-1.732-1l-.336.582a3 3 0 0 0-1.097-.001l-.335-.581a1 1 0 1 0-1.732 1l.335.58a3 3 0 0 0-.547.951H14.5a1 1 0 0 0 0 2h.671a3 3 0 0 0 .549.95l-.336.581a1 1 0 1 0 1.732 1l.336-.581c.359.066.73.068 1.097 0l.335.581a1 1 0 1 0 1.732-1l-.335-.58c.242-.284.426-.607.547-.951h.672a1 1 0 1 0 0-2h-.671a3 3 0 0 0-.549-.95z"
class=""></path>
</g>
</svg>
Crew Management
<span class="ml-auto bg-cyan-500/20 text-cyan-300 text-xs px-2 py-1 rounded-full font-medium">8</span>
</a>
<!-- Current Flights -->
<div class="px-4 mt-6">
<button id="flightsToggleDark" class="flex items-center gap-2 w-full uppercase text-xs tracking-wider font-semibold mb-3 text-zinc-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:down-line" class="iconify w-4 h-4 transition-transform iconify--mingcute"><g fill="none" fill-rule="evenodd" class=""><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M12.707 15.707a1 1 0 0 1-1.414 0L5.636 10.05A1 1 0 1 1 7.05 8.636l4.95 4.95l4.95-4.95a1 1 0 0 1 1.414 1.414z" class=""></path></g></svg>
Current Flights
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:add-line" class="iconify w-4 h-4 ml-auto rounded p-0.5 transition-colors hover:bg-zinc-700 text-zinc-500 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M11 20a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2h-7V4a1 1 0 1 0-2 0v7H4a1 1 0 1 0 0 2h7z" class=""></path></g></svg>
</button>
<div id="flightsListDark" class="space-y-1">
<button class="flex items-center gap-3 w-full beautiful-shadow-dark text-white bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl pt-3 pr-4 pb-3 pl-4 border border-emerald-400/70">
<span class="w-2 h-2 rounded-full bg-white pulse-dot"></span>
<div class="flex flex-col items-start">
<span class="font-medium">NX-4521 LAX→JFK</span>
<span class="text-xs text-emerald-100">Airbus A350</span>
</div>
<div class="ml-auto flex items-center gap-1">
<span class="text-xs text-emerald-100">Cruising</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mingcute:time-fill" class="iconify w-4 h-4 iconify--mingcute"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4a1 1 0 0 0-1 1v5a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V7a1 1 0 0 0-1-1" class=""></path></g></svg>
</div>
</button>
<a href="#"
class="block pl-9 py-2 hover:text-white rounded-lg transition-colors text-zinc-400 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">Flight
Status</a>
<a href="#"
class="block pl-9 py-2 hover:text-white rounded-lg transition-colors text-zinc-400 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">Weather
Update</a>
<a href="#"
class="block pl-9 py-2 hover:text-white rounded-lg transition-colors text-zinc-400 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">Navigation</a>
<button class="flex items-center gap-3 w-full px-4 py-3 mt-2 rounded-xl transition-colors text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
<div class="flex flex-col items-start">
<span class="">NX-7849 DFW→SFO</span>
<span class="text-xs text-zinc-500">Boeing 787-9</span>
</div>
<span class="ml-auto text-xs bg-yellow-500/20 text-yellow-300 px-2 py-1 rounded-full">Boarding</span>
</button>
<button class="flex items-center gap-3 w-full px-4 py-3 rounded-xl transition-colors text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
<div class="flex flex-col items-start">
<span>NX-2196 MIA→BOS</span>
<span class="text-xs text-zinc-500">Embraer E190</span>
</div>
<div class="ml-auto flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
<span class="text-xs text-zinc-500">45m</span>
</div>
</button>
<button class="flex items-center gap-3 w-full px-4 py-3 rounded-xl transition-colors text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<span class="w-2 h-2 rounded-full bg-orange-500"></span>
<div class="flex flex-col items-start">
<span>NX-5033 SEA→PHX</span>
<span class="text-xs text-zinc-500">Boeing 737-900</span>
</div>
<span class="ml-auto text-xs bg-orange-500/20 text-orange-300 px-2 py-1 rounded-full">Weather</span>
</button>
</div>
</div>
<!-- Mission Control -->
<div class="px-4 mt-6 pb-6">
<p class="uppercase text-xs tracking-wider font-semibold mb-3 text-zinc-400">Mission Control</p>
<div class="space-y-1">
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors hover:text-white text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:calendar-line" class="iconify w-4 h-4 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M16 3a1 1 0 0 1 .993.883L17 4v1h2a2 2 0 0 1 1.995 1.85L21 7v12a2 2 0 0 1-1.85 1.995L19 21H5a2 2 0 0 1-1.995-1.85L3 19V7a2 2 0 0 1 1.85-1.995L5 5h2V4a1 1 0 0 1 1.993-.117L9 4v1h6V4a1 1 0 0 1 1-1m3 9H5v7h14zm0-5H5v3h14z"
class=""></path>
</g>
</svg>
Flight Schedule
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors hover:text-white text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<span class="iconify w-4 h-4" data-icon="mingcute:plane-2-fill"></span>
Aircraft Status
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors hover:text-white relative text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:alert-line" class="iconify w-4 h-4 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="m13.299 3.148l8.634 14.954a1.5 1.5 0 0 1-1.299 2.25H3.366a1.5 1.5 0 0 1-1.299-2.25l8.634-14.954c.577-1 2.02-1 2.598 0M12 4.898L4.232 18.352h15.536zM12 15a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-7a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1"
class=""></path>
</g>
</svg>
System Alerts
<span class="absolute right-4 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-red-400 pulse-dot"></span>
</a>
<a href="#"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl transition-colors hover:text-white text-zinc-300 hover:bg-zinc-800 border border-transparent hover:border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="mingcute:chart-line-fill" class="iconify w-4 h-4 iconify--mingcute">
<g fill="none" class="">
<path
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
class=""></path>
<path fill="currentColor"
d="M4 3.5a1.5 1.5 0 0 1 1.493 1.356L5.5 5v12.5H20a1.5 1.5 0 0 1 .144 2.993L20 20.5H4a1.5 1.5 0 0 1-1.493-1.356L2.5 19V5A1.5 1.5 0 0 1 4 3.5m16.193 2.818c1.346 0 2.02 1.627 1.068 2.578l-5.569 5.569a1.6 1.6 0 0 1-2.263 0l-2.404-2.404l-2.475 2.475a1.5 1.5 0 1 1-2.121-2.122L9.894 8.95a1.6 1.6 0 0 1 2.262 0l2.405 2.405l2.181-2.182a1.5 1.5 0 0 1 .647-2.854z"
class=""></path>
</g>
</svg>
Performance
</a>
</div>
</div>
</nav>
</aside>
</main>