feat(ui): dock resource actions in top bar, user menu in sidebar

Teleport application/database/service heading actions into a fixed
#resource-action-hud-slot so they no longer overlay page content.
Render the account menu in the sidebar footer (with collapse-aware
layout) instead of the header, and drop the project card hover arrow.
This commit is contained in:
Andras Bacsai committed 2026-08-05 20:17:21 +02:00
1 parent 85613b01ba
commit ec165412c3
12 files changed
+115 -34

No files matched your search

@@ -5,7 +5,7 @@
</x-slot>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" wire:key="application-heading-deployment-show" />
<section class="application-settings-workspace flex min-h-0 w-full max-w-[1180px] flex-1">
<section class="application-settings-workspace mt-4 flex min-h-0 w-full max-w-[1180px] flex-1 lg:mt-0">
<div class="grid min-h-0 min-w-0 flex-1 gap-8 xl:grid-cols-[210px_minmax(0,1fr)] xl:gap-10">
<x-application.configuration-sidebar :application="$application" :flush="true"
current-route="project.application.deployment.show" />
@@ -183,11 +183,11 @@
</div>
</div>
{{-- Layer-2 top nav: one unified bar — menus left, actions right --}}
<div
class="hidden w-full items-center xl:fixed xl:top-14 xl:right-4 xl:z-30 xl:flex xl:h-12 xl:w-auto xl:border-0 xl:bg-transparent xl:p-0 xl:backdrop-blur-none xl:dark:bg-transparent">
{{-- Desktop actions live in the fixed top bar so they cannot overlap page content. --}}
@teleport('#resource-action-hud-slot')
<div class="hidden w-full items-center xl:flex xl:w-auto">
<div
class="resource-heading-navbar application-heading-actions flex w-full min-w-0 items-center justify-start gap-2 overflow-visible rounded-[10px] border border-neutral-200 bg-neutral-100 p-1 xl:w-auto xl:justify-end dark:border-white/[0.07] dark:bg-white/[0.035]">
class="resource-heading-navbar application-heading-actions flex w-full min-w-0 items-center justify-start gap-1 overflow-visible xl:w-auto xl:justify-end">
<div class="resource-heading-actions flex shrink-0 items-center gap-0.5">
{{-- Status badge temporarily hidden — will be redesigned later:
<x-status.index :resource="$application" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" /> --}}
@@ -282,5 +282,6 @@
</div>
</div>
</div>
@endteleport
</div>
</nav>