fix(sidebar): remove theme switcher from sidebar navbar

resources/views/components/navbar.blade.php

@@ -44,16 +44,6 @@
                 this.queryTheme();
                 this.checkZoom();
             },
-            setTheme(type) {
-                this.theme = type;
-                localStorage.setItem('theme', type);
-                this.queryTheme();
-            },
-            cycleTheme() {
-                const themes = ['light', 'system', 'dark'];
-                const currentIndex = themes.indexOf(this.theme || localStorage.getItem('theme') || 'dark');
-                this.setTheme(themes[(currentIndex + 1) % themes.length]);
-            },
             queryTheme() {
                 const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
                 const userSettings = localStorage.getItem('theme') || 'dark';
@@ -375,45 +365,6 @@ class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item
                     <li>
                         <livewire:settings-dropdown trigger="changelog-sidebar" />
                     </li>
-                    <li>
-                        <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" />
-                            </svg>
-                            <svg x-show="theme === 'light'" 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="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>
-                            <svg x-show="theme === 'system'" 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="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="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.`"
-                            class="menu-item hidden"
-                            :class="collapsed && 'lg:flex'">
-                            <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" />
-                            </svg>
-                            <svg x-show="theme === 'light'" 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="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>
-                            <svg x-show="theme === 'system'" 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="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>
-                    </li>
                     @if (isInstanceAdmin() && !isCloud())
                         @persist('upgrade')
                             <li>

tests/Feature/SidebarNavigationPreferencesTest.php

@@ -2,18 +2,16 @@
 
 use App\Livewire\SettingsDropdown;
 
-it('keeps changelog and the theme switcher in the sidebar without the old preferences trigger', function () {
+it('keeps changelog in the sidebar without a dedicated theme switcher', function () {
     $navbarView = file_get_contents(resource_path('views/components/navbar.blade.php'));
 
     expect($navbarView)
         ->toContain('<livewire:settings-dropdown trigger="changelog-sidebar" />')
         ->not->toContain('<livewire:settings-dropdown />')
-        ->toContain('aria-label="Theme switcher"')
+        ->not->toContain('<span class="text-left menu-item-label">Theme</span>')
-        ->toContain('aria-label="Use light theme"')
+        ->not->toContain('Click to change theme.')
-        ->toContain('aria-label="Use system theme"')
+        ->not->toContain('cycleTheme()')
-        ->toContain('aria-label="Use dark theme"')
+        ->toContain('this.queryTheme();')
-        ->toContain('cycleTheme()')
-        ->toContain("const themes = ['light', 'system', 'dark'];")
         ->toContain('pl-2 pr-3 items-start gap-3')
         ->toContain('class="flex min-w-0 flex-1 flex-col"')
         ->toContain('class="min-w-0 flex-1"')