Selaa lähdekoodia

feat(ui): move theme toggle into user menu

Moves the light/dark mode switch from the topnav out of the always-visible
button row into the user dropdown, between "My identity" and "Sign out".
Tightens the topnav to brand + search + user menu, with theme toggling
tucked alongside the other per-user actions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa 1 viikko sitten
vanhempi
sitoutus
a1d6b09bd7
1 muutettua tiedostoa jossa 7 lisäystä ja 7 poistoa
  1. 7 7
      ui/resources/views/partials/topnav.twig

+ 7 - 7
ui/resources/views/partials/topnav.twig

@@ -17,13 +17,6 @@
                        maxlength="64"
                        class="w-64 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-900" />
             </form>
-            <button type="button"
-                    data-theme-toggle
-                    aria-label="Toggle theme"
-                    class="rounded-md border border-slate-300 bg-white p-2 text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800">
-                <span data-theme-icon-light class="hidden dark:inline">☾</span>
-                <span data-theme-icon-dark class="dark:hidden">☀</span>
-            </button>
             <div x-data="{ open: false }" class="relative">
                 <button type="button"
                         x-on:click="open = !open"
@@ -37,6 +30,13 @@
                      style="display: none;"
                      class="absolute right-0 mt-2 w-48 origin-top-right rounded-md border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-800 dark:bg-slate-900">
                     <a href="/app/me" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">My identity</a>
+                    <button type="button"
+                            data-theme-toggle
+                            aria-label="Toggle theme"
+                            class="flex w-full items-center justify-between px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">
+                        <span><span class="hidden dark:inline">Light mode</span><span class="dark:hidden">Dark mode</span></span>
+                        <span aria-hidden="true"><span data-theme-icon-light class="hidden dark:inline">☾</span><span data-theme-icon-dark class="dark:hidden">☀</span></span>
+                    </button>
                     <form method="post" action="/logout">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                         <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">Sign out</button>