rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(navbar): refine collapsed sidebar spacing

Browse source 
Adjust sidebar icon sizing, collapsed menu dimensions, and main layout padding for improved alignment. Also tidy related view spacing and formatting.
This commit is contained in:
Andras Bacsai 2026-05-12 11:07:19 +02:00
parent 9590f144bd
commit f098895abf
6 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/css/utilities.css
View file

@ -181,7 +181,7 @@ @utility menu-item {
@apply flex gap-3 items-center px-2 py-1 w-full text-sm dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 rounded-sm truncate min-w-0;
}
@utility menu-item-icon {
@apply flex-shrink-0 w-6 h-6 dark:hover:text-white;
@apply shrink-0 size-4 dark:hover:text-white;
}
@utility menu-item-label {
@ -201,7 +201,7 @@ @utility sub-menu-item {
}
@utility sub-menu-item-icon {
@apply flex-shrink-0 w-4 h-4 dark:hover:text-white;
@apply shrink-0 size-4 dark:hover:text-white;
}
@utility heading-item-active {
@ -347,8 +347,12 @@ @utility log-info {
@media (min-width: 1024px) {
.sidebar-collapsed .menu-item {
justify-content: center;
width: var(--button-h, 2rem);
height: var(--button-h, 2rem);
min-height: var(--button-h, 2rem);
padding-left: 0;
padding-right: 0;
gap: 0;
margin-inline: auto;
}
}

8
resources/views/components/navbar.blade.php
View file

@ -1,5 +1,5 @@
<nav class="flex flex-col flex-1 bg-white border-r dark:border-coolgray-200 border-neutral-300 dark:bg-base"
:class="collapsed ? 'lg:px-1 px-2 sidebar-collapsed' : 'px-2'"
:class="collapsed ? 'px-2 lg:px-[0.7rem] sidebar-collapsed' : 'px-2 lg:px-[0.7rem]'"
@mouseover="
if (!collapsed) return;
const el = $event.target.closest('.menu-item');
@ -93,7 +93,7 @@
}
}">
<div class="flex pt-4 pb-4 pl-2 items-start gap-2 motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none"
:class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:gap-3 lg:pt-8' : 'lg:pt-6'">
:class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:gap-3 lg:pt-7' : 'lg:pt-6'">
<div class="flex flex-col w-full" :class="collapsed && 'lg:hidden'">
<a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-tight dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
<x-version />
@ -124,7 +124,7 @@ class="px-1 py-0.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400
<livewire:settings-dropdown />
</div>
</div>
<div class="px-2 pt-2 pb-7 overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-0 lg:min-h-[4.5rem] lg:flex lg:justify-center'">
<div class="px-2 pt-2 pb-7 overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-4 lg:min-h-8 lg:flex lg:justify-center'">
<livewire:switch-team />
</div>
<ul role="list" class="flex flex-col flex-1 gap-y-7">
@ -425,7 +425,7 @@ class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-it
<path fill="currentColor"
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
</svg>
<span :class="collapsed && 'lg:hidden'">Logout</span>
<span class="text-left menu-item-label" :class="collapsed && 'lg:hidden'">Logout</span>
</button>
</form>
</li>

4
resources/views/layouts/app.blade.php
View file

@ -79,8 +79,8 @@ class="text-xl font-bold tracking-wide dark:text-white hover:opacity-80 transiti
</button>
</div>
<main class="transition-[padding] duration-200" :class="collapsed ? 'lg:pl-16' : 'lg:pl-56'">
<div class="p-4 sm:px-6 lg:px-8 lg:py-6">
<main class="transition-[padding] duration-200 p-6" :class="collapsed ? 'lg:pl-[6rem]' : 'lg:pl-[16rem]'">
<div>
{{ $slot }}
</div>
</main>

2
resources/views/livewire/global-search.blade.php
View file

@ -1137,4 +1137,4 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5
</template>
</div>
</div>
</div>

2
resources/views/livewire/project/index.blade.php
View file

@ -2,7 +2,7 @@
<x-slot:title>
Projects | Coolify
</x-slot>
<div class="flex gap-2">
<div class="flex gap-2 items-center">
<h1>Projects</h1>
@can('createAnyResource')
<x-modal-input buttonTitle="+ Add" title="New Project">

2
resources/views/livewire/project/service/index.blade.php
View file

@ -123,7 +123,7 @@ class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-activ
@if ($showPortWarningModal)
<div x-data="{ modalOpen: true }" x-init="$nextTick(() => { modalOpen = true })"
@keydown.escape.window="modalOpen = false; $wire.call('cancelRemovePort')"
:class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
:class="{ 'z-40': modalOpen }" class="relative">
<template x-teleport="body">
<div x-show="modalOpen"
class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>