tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-20 06:23:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): reverse collapsed sidebar footer and polish server filter

Browse Source 
Use flex-col-reverse when the sidebar is collapsed, apply the shared
input focus class on the server filter field, and mark the selected
server with a check-circle icon. Update navbar layout tests.
This commit is contained in:
Andras Bacsai
2026-08-05 20:28:20 +02:00
parent ec165412c3
commit cd62012ff8
4 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/navbar.blade.php
+1 -1
View File
@@ -207,7 +207,7 @@
</ul>
{{-- Sticky sidebar collapser (desktop only; mobile uses a temporary slide-over) --}}
<div class="sticky bottom-0 mt-auto -mx-2 hidden items-center gap-1 border-t border-neutral-200 bg-white px-2 py-2 dark:border-white/[0.06] dark:bg-panel lg:-mx-3 lg:flex lg:px-3"
:class="collapsed ? 'flex-col justify-center' : 'justify-between'">
:class="collapsed ? 'flex-col-reverse justify-center' : 'justify-between'">
<x-top-user-menu sidebar />
<button type="button" @click="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar"
class="menu-item w-8 shrink-0 justify-center px-0">
resources/views/livewire/server/navbar.blade.php
+2 -2
View File
@@ -110,7 +110,7 @@
<x-reicon name="search"
class="pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
<input type="search" x-model.debounce.100ms="search" placeholder="Filter servers…"
class="h-7! w-full rounded-md! border-neutral-200! bg-white! py-0! pr-2! pl-7! text-[11px]! text-black! placeholder:text-neutral-400! dark:border-white/[0.1]! dark:bg-coolgray-100! dark:text-white! dark:placeholder:text-fg-faint!">
class="input h-7! w-full rounded-md! border-neutral-200! bg-white! py-0! pr-2! pl-7! text-[11px]! text-black! placeholder:text-neutral-400! dark:border-white/[0.1]! dark:bg-coolgray-100! dark:text-white! dark:placeholder:text-fg-faint!">
</div>
</div>
<template x-for="option in servers.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))"
@@ -120,7 +120,7 @@
<span class="size-1.5 shrink-0 rounded-full"
:class="option.functional ? 'bg-success' : 'bg-error'"></span>
<span class="min-w-0 flex-1 truncate" x-text="option.name"></span>
<x-reicon name="check"
<x-reicon name="check-circle"
class="size-3.5 shrink-0 text-coollabs dark:text-warning"
x-show="option.uuid === '{{ $server->uuid }}'" />
</a>
tests/Feature/ResourceHeadingUnifiedNavbarTest.php
+2 -1
View File
@@ -75,7 +75,8 @@ it('places the account menu beside the desktop sidebar toggle while retaining it
expect($navbar)
->toContain('<x-top-user-menu sidebar />')
->toContain('Toggle sidebar');
->toContain('Toggle sidebar')
->toContain("collapsed ? 'flex-col-reverse justify-center'");
expect($accountMenu)
->toContain("'sidebar' => false")
tests/Feature/ServerNavbarStatusLayoutTest.php
+10
View File
@@ -30,3 +30,13 @@ it('collapses server subsystem badges into one status summary', function () {
->toContain('<button')
->toContain("merge(['type' => 'button'])");
});
it('uses the branded input focus state for the server filter', function () {
$navbarView = file_get_contents(resource_path('views/livewire/server/navbar.blade.php'));
expect($navbarView)
->toContain('placeholder="Filter servers…"')
->toContain('class="input h-7!')
->toContain('<x-reicon name="check-circle"')
->not->toContain('<x-reicon name="check"');
});