starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): narrow the collapsed sidebar in the floating navigation style

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2026-10-24 23:17:09 +02:00
co-authored by Claude Opus 5.5
parent 9c8f38752a
commit 547bdc3bf4
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+19
View File
@@ -6159,8 +6159,15 @@ html.dark .canvas-zoom-max {
tab strip, and settings rail float as framed panels over a dotted backdrop,
like the canvas islands. Set on <html> by applyStoredTheme() from
localStorage.navStyle; the default style keeps edge-to-edge bars. */
/* Width of the collapsed desktop sidebar and the brand cell above it. */
html {
--sidebar-collapsed-w: 4rem;
}
@media (min-width: 1024px) {
html[data-nav-style="floating"] {
/* The framed rail needs no edge spacing: 1px border + 5px padding + 40px content. */
--sidebar-collapsed-w: 3.25rem;
--floating-gap: 0.5rem;
--floating-radius: 8px;
--floating-line: oklch(0% 0 0 / 0.09);
@@ -6233,6 +6240,18 @@ html.dark .canvas-zoom-max {
border-radius: 0 0 var(--floating-radius) var(--floating-radius);
}
html[data-nav-style="floating"] .app-sidebar nav.sidebar-collapsed {
padding-left: 0.3125rem;
padding-right: 0.3125rem;
}
html[data-nav-style="floating"] .app-sidebar nav.sidebar-collapsed > .sidebar-footer {
margin-left: -0.3125rem;
margin-right: -0.3125rem;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
}
html[data-nav-style="floating"] .app-main {
margin-left: calc(var(--sidebar-w, 14rem) + var(--floating-gap));
/* The content top lines up with the sidebar and settings rail panels.
resources/views/layouts/app.blade.php
+5 -5
View File
@@ -33,7 +33,7 @@
localStorage.setItem('sidebarCollapsed', this.collapsed);
}
}" @open-global-search.window="open = false" @page-width-changed.window="pageWidth = $event.detail"
:style="{ '--sidebar-w': collapsed ? '4rem' : '14rem' }" x-cloak
:style="{ '--sidebar-w': collapsed ? 'var(--sidebar-collapsed-w)' : '14rem' }" x-cloak
@class(['app-shell dark:text-inherit text-black', 'app-shell-canvas flex h-dvh flex-col' => $fullBleed ?? false])>
{{-- ============ DESKTOP TOP BAR ============ --}}
<header
@@ -46,7 +46,7 @@
class="app-topbar hidden lg:flex fixed top-0 inset-x-0 z-50 h-12 items-center bg-white/95 dark:bg-panel/95 backdrop-blur">
{{-- Brand (width tracks sidebar) --}}
<div class="app-topbar-brand flex items-center gap-2 h-full shrink-0 border-r border-black/[0.06] bg-neutral-50 dark:border-white/[0.04] dark:bg-app transition-[width] duration-200"
:class="collapsed ? 'w-16 justify-center px-0 border-b' : 'w-56 px-4'">
:class="collapsed ? 'w-(--sidebar-collapsed-w) justify-center px-0 border-b' : 'w-56 px-4'">
<div class="flex items-baseline gap-1.5 min-w-0">
<a href="/" {{ wireNavigate() }} title="Coolify"
class="flex shrink-0 items-center hover:opacity-80 transition-opacity">
@@ -128,7 +128,7 @@
{{-- ============ DESKTOP SIDEBAR (below top bar) ============ --}}
<div class="app-sidebar hidden lg:fixed lg:top-12 lg:bottom-0 lg:left-0 lg:z-40 lg:flex lg:flex-col min-w-0"
:class="[collapsed ? 'lg:w-16' : 'lg:w-56', sidebarReady ? 'transition-[width] duration-200' : '']">
:class="[collapsed ? 'lg:w-(--sidebar-collapsed-w)' : 'lg:w-56', sidebarReady ? 'transition-[width] duration-200' : '']">
<div class="flex min-h-0 grow min-w-0 flex-col overflow-visible">
<x-navbar desktop />
</div>
@@ -171,7 +171,7 @@
@if ($fullBleed ?? false)
{{-- Full-bleed pages (canvases) fill the space between the top bar and the sidebar. --}}
<main class="app-main app-main-full relative min-h-0 flex-1 bg-neutral-50 dark:bg-app lg:pt-12"
:class="[collapsed ? 'lg:ml-16' : 'lg:ml-56', sidebarReady ? 'transition-[margin] duration-200' : '']">
:class="[collapsed ? 'lg:ml-(--sidebar-collapsed-w)' : 'lg:ml-56', sidebarReady ? 'transition-[margin] duration-200' : '']">
<div class="relative h-full">
{{ $slot }}
</div>
@@ -179,7 +179,7 @@
@else
<main
class="app-main min-h-screen bg-neutral-50 dark:bg-app px-5 py-6 sm:px-8 lg:px-10 lg:pt-[calc(3rem+1.75rem)] lg:pb-10"
:class="[collapsed ? 'lg:ml-16' : 'lg:ml-56', sidebarReady ? 'transition-[margin] duration-200' : '', pageWidth === 'centered' ? '' : 'app-main-wide']">
:class="[collapsed ? 'lg:ml-(--sidebar-collapsed-w)' : 'lg:ml-56', sidebarReady ? 'transition-[margin] duration-200' : '', pageWidth === 'centered' ? '' : 'app-main-wide']">
<div class="w-full" :class="pageWidth === 'centered' ? 'mx-auto max-w-[1400px]' : 'max-w-none'">
{{ $slot }}
</div>