56 lines
3.2 KiB
PHP
56 lines
3.2 KiB
PHP
{{-- Fixed on desktop, off-canvas drawer on mobile/tablet (toggled by `nav` in the layout). --}}
|
|
<aside class="fixed inset-y-0 left-0 z-40 flex w-[272px] -translate-x-full flex-col border-r border-line bg-surface transition-transform duration-200 lg:translate-x-0"
|
|
:class="{ '!translate-x-0': nav }"
|
|
x-bind:inert="! nav && ! desktop"
|
|
aria-label="Seitennavigation">
|
|
{{-- Brand --}}
|
|
<div class="flex h-14 shrink-0 items-center gap-2.5 border-b border-line px-4">
|
|
<span class="grid h-7 w-7 place-items-center rounded-sm bg-accent/15 text-accent">
|
|
<x-icon name="server" class="h-4 w-4" />
|
|
</span>
|
|
<span class="font-display text-lg font-semibold tracking-wide text-ink">Clus<span class="text-accent">e</span>v</span>
|
|
<button type="button" @click="nav = false"
|
|
class="ml-auto grid min-h-11 min-w-11 place-items-center rounded-md text-ink-3 hover:bg-raised hover:text-ink lg:hidden"
|
|
aria-label="Menü schließen">
|
|
<x-icon name="x" class="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Server switcher (mock) --}}
|
|
<div class="shrink-0 border-b border-line p-3">
|
|
<button type="button"
|
|
class="flex min-h-11 w-full items-center gap-2.5 rounded-md border border-line bg-inset px-3 py-2 text-left transition-colors hover:border-line-strong">
|
|
<x-status-dot status="online" :ping="true" />
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm text-ink">web-01</span>
|
|
<span class="block truncate font-mono text-[11px] text-ink-3">10.10.90.136</span>
|
|
</span>
|
|
<x-icon name="switcher" class="h-4 w-4 shrink-0 text-ink-3" />
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Nav --}}
|
|
<nav class="flex-1 space-y-1 overflow-y-auto p-3">
|
|
<p class="px-3 pb-1 pt-2 font-mono text-[10px] uppercase tracking-widest text-ink-4">Flotte</p>
|
|
<x-nav-item icon="dashboard" href="/" :active="request()->is('/')">Dashboard</x-nav-item>
|
|
<x-nav-item icon="server" href="/servers" :active="request()->is('servers*')">Server</x-nav-item>
|
|
<x-nav-item icon="cpu" href="/services" :active="request()->is('services*')">Dienste</x-nav-item>
|
|
<x-nav-item icon="folder" href="/files" :active="request()->is('files*')">Dateien</x-nav-item>
|
|
<x-nav-item icon="audit" href="/audit" :active="request()->is('audit*')">Audit-Log</x-nav-item>
|
|
</nav>
|
|
|
|
{{-- User --}}
|
|
<div class="shrink-0 border-t border-line p-3">
|
|
<div class="flex items-center gap-2.5 rounded-md px-2 py-1.5">
|
|
<span class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-raised font-mono text-xs text-ink-2">AD</span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm text-ink">admin</span>
|
|
<span class="block truncate font-mono text-[11px] text-online">2FA aktiv</span>
|
|
</span>
|
|
<a href="#" class="grid min-h-11 min-w-11 shrink-0 place-items-center rounded-md text-ink-3 hover:bg-raised hover:text-ink" aria-label="Abmelden">
|
|
<x-icon name="logout" class="h-[18px] w-[18px]" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|