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

chore(navbar): replace theme selector with cycle button

Browse source
This commit is contained in:
Andras Bacsai 2026-06-04 15:41:38 +02:00
parent 22f9f96db6
commit 7053f560c5
2 changed files with 20 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -376,7 +376,11 @@ class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item
<livewire:settings-dropdown trigger="changelog-sidebar" />
</li>
<li>
<div class="menu-item" title="Theme" aria-label="Theme switcher" :class="collapsed && 'lg:hidden'">
<button type="button" @click.stop="cycleTheme()"
:title="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change.`"
:aria-label="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change theme.`"
class="menu-item"
:class="collapsed && 'lg:hidden'">
<svg x-show="theme === 'dark'" class="menu-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
@ -389,34 +393,8 @@ class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span class="menu-item-label">Theme</span>
<div class="ml-auto flex items-center gap-0.5 rounded-sm bg-neutral-100 p-0.5 dark:bg-coolgray-200">
<button type="button" @click.stop="setTheme('light')" title="Light" aria-label="Use light theme"
class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
:class="theme === 'light' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<button type="button" @click.stop="setTheme('system')" title="System default" aria-label="Use system theme"
class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
:class="theme === 'system' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button type="button" @click.stop="setTheme('dark')" title="Dark" aria-label="Use dark theme"
class="grid size-6 place-items-center rounded-sm text-xs hover:bg-white hover:text-coollabs dark:hover:bg-base dark:hover:text-warning"
:class="theme === 'dark' && 'bg-white text-coollabs shadow-sm dark:bg-base dark:text-warning'">
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</div>
</div>
<span class="text-left menu-item-label">Theme</span>
</button>
<button type="button" @click.stop="cycleTheme()"
:title="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change.`"
:aria-label="`Theme: ${theme === 'system' ? 'System default' : theme}. Click to change theme.`"

13
tests/Unit/NavbarThemeSwitcherTest.php Normal file
View file

@ -0,0 +1,13 @@
<?php
test('expanded navbar theme item cycles themes without a right side selector', function () {
$navbar = file_get_contents(__DIR__.'/../../resources/views/components/navbar.blade.php');
expect(substr_count($navbar, '@click.stop="cycleTheme()"'))->toBe(2)
->and($navbar)->not->toContain('aria-label="Theme switcher"')
->and($navbar)->not->toContain('ml-auto flex items-center gap-0.5')
->and($navbar)->not->toContain('@click.stop="setTheme(\'light\')"')
->and($navbar)->not->toContain('@click.stop="setTheme(\'system\')"')
->and($navbar)->not->toContain('@click.stop="setTheme(\'dark\')"')
->and($navbar)->toContain('<span class="text-left menu-item-label">Theme</span>');
});