ux: move support and theme buttons to topnav (#23243)

Move the contact support button and the theme switch button to the top
nav bar.

Author: ArthurFlag

assets/css/theme.css

@@ -201,6 +201,7 @@
   --color-yellow-outlinedborder: rgba(235, 156, 0, 0.56);
   --color-yellow-selected: rgba(235, 156, 0, 0.16);
 
+  --topnav-button-bg: #4878f3;
   --tw-prose-code-bg: var(--color-gray-100);
   --tw-prose-code-bg-dark: var(--color-gray-800);
 }

assets/css/utilities.css

@@ -249,10 +249,17 @@
 @utility breadcrumbs {
   font-size: 90%;
 }
+
 @utility topbar-button {
-  @apply text-white font-semibold min-h-10 px-2 bg-blue-300/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
+  @apply text-center max-w-40 text-white font-semibold min-h-10 px-2 bg-(--topnav-button-bg) rounded-md border-1 border-blue-300;
+  @apply inline-flex justify-center items-center gap-1.5 hover:bg-blue-400 hover:border-blue-300 transition-colors;
+  svg {
+   font-size: 19px;
+  }
+}
+@utility topbar-button-clear {
+  @apply text-center text-white/95 font-semibold min-h-9 px-0   hover:text-white/85 transition-colors;
   svg {
    font-size: 19px;
   }
 }
-

assets/icons/headset.svg

@@ -330,15 +330,13 @@
       "hidden",
       "hidden'",
       "highlight",
-      "hover:bg-blue",
       "hover:bg-blue-400",
       "hover:bg-blue-400/90",
       "hover:bg-blue-500",
       "hover:bg-gray-100",
       "hover:bg-gray-200",
       "hover:bg-gray-50",
       "hover:border-white/20",
-      "hover:dark:bg-blue-500",
       "hover:dark:bg-gray-800",
       "hover:dark:text-blue-400",
       "hover:dark:text-blue-700",
@@ -375,6 +373,7 @@
       "lg:grid-cols-3",
       "lg:grid-cols-4",
       "lg:hidden",
+      "lg:inline",
       "lg:no-underline",
       "lg:pb-2",
       "lg:scale-100",
@@ -446,8 +445,6 @@
       "object-cover",
       "open-kapa-widget",
       "openSUSE-and-SLES",
-      "order-1",
-      "order-2",
       "origin-bottom-right",
       "origin-top-right",
       "ot-sdk-show-settings",
@@ -563,14 +560,13 @@
       "top-16",
       "top-6",
       "topbar-button",
+      "topbar-button-clear",
       "transition",
       "transition-colors",
       "transition-transform",
       "truncate",
       "underline-offset-2",
-      "w-0",
       "w-2",
-      "w-32",
       "w-5",
       "w-65",
       "w-8",

assets/icons/moon.svg

@@ -49,6 +49,40 @@
             >
             Back
           </button>
+          <!-- Top nav buttons appear here on sm width -->
+          <div class="flex flex-col gap-2 md:hidden mb-4">
+            <button
+              @click="open = false"
+              class="topbar-button open-kapa-widget w-full flex items-center gap-2"
+            >
+              <span>Ask&nbsp;AI</span>
+              <span class="icon-svg">
+                {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
+              </span>
+            </button>
+            <div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
+               {{ partialCached "search-bar.html" "-" }}
+            </div>
+            {{ partial "contact-support-button.html" .}}
+            <button
+              aria-label="Theme switch"
+              id="theme-switch"
+              class="topbar-button flex items-center"
+              x-data="{ theme: localStorage.getItem('theme-preference') }"
+              x-init="$watch('theme', value => {
+                    localStorage.setItem('theme-preference', value);
+                    document.firstElementChild.className = value;
+                  })"
+              @click="theme = (theme === 'dark' ? 'light' : 'dark')"
+            >
+              <span class="icon-svg icon-sm dark:hidden"
+                >{{ partialCached "icon" "icons/sun.svg" "sun" }}
+              </span>
+              <span class="icon-svg icon-sm hidden dark:block">
+                {{ partialCached "icon" "icons/moon.svg" "moon" }}
+              </span>
+            </button>
+          </div>
           <!-- Actual Sidebar Content -->
           {{ block "left" . }}
             {{ partial "sidebar/mainnav.html" . }}

assets/icons/search.svg

@@ -11,15 +11,14 @@ <h1 class="py-4">{{ .Title }}</h1>
         <input type="search" id="search-page-input"
           class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] w-full max-w-xl min-w-0 rounded-sm bg-white px-4 py-2 outline-hidden"
           placeholder="Search…" tabindex="0" />
-        <div class="admonition flex flex-row min-w-fit items-center w-0 gap-1">
+        <div class="admonition flex flex-row min-w-fit items-center gap-1">
           <p>Not finding what you're looking for? Try</p>
           <button onclick="askAI('search-page-input')" class="topbar-button bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
             <span>Ask&nbsp;AI</span>
             <span class="icon-svg">
               {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
             </span>
           </button>
-        </div>
       </div>
       <hr class="border-divider-light dark:border-divider-dark" />
       <div id="search-page-results">