ux: move support and theme buttons to topnav

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;
   }
 }
-

hugo_stats.json

@@ -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",

layouts/_default/baseof.html

@@ -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" . }}

layouts/_default/search.html

@@ -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">

layouts/partials/contact-support-button.html

@@ -0,0 +1,12 @@
+{{ $class := "" }}
+{{ if eq . "notext" }}
+  {{ $class = "hidden lg:inline" }}
+{{ end }}
+<a class="topbar-button w-full flex items-center gap-2"
+   href="https://hub.docker.com/support/contact"
+   aria-label="Contact support">
+    <span class="{{ $class }}">Contact support</span>
+    <span class="icon-svg icon-sm">
+      {{ partial "utils/svg.html" "/icons/headset.svg" }}
+    </span>
+</a>

layouts/partials/footer.html

@@ -1,8 +1,4 @@
-<div
-  class="relative z-10 flex justify-center bg-gray-100 px-4 py-8 dark:bg-gray-900"
->
-  {{ partialCached "components/support-button.html" . }}
-</div>
+
 <div class="flex justify-center bg-gray-100 px-4 pt-10 pb-20 dark:bg-gray-900">
   <div class="flex w-full max-w-[840px] flex-col gap-10">
     <div class="flex flex-col items-center justify-evenly gap-4 md:flex-row">
@@ -95,27 +91,6 @@
       <button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
         Cookies Settings
       </button>
-      <div class="flex items-center gap-2">
-        <span>Theme:</span>
-        <button
-          aria-label="Theme switch"
-          id="theme-switch"
-          class="bg-blue rounded-sm px-4 py-1 text-white transition hover:bg-blue-400 dark:bg-blue-400 dark:hover:bg-blue-500"
-          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"
-            >Light {{ partialCached "icon" "light_mode" "light_mode" }}</span
-          >
-          <span class="icon-svg icon-sm hidden dark:block"
-            >Dark {{ partialCached "icon" "dark_mode" "dark_mode" }}</span
-          >
-        </button>
-      </div>
     </div>
   </div>
 </div>

layouts/partials/header.html

@@ -45,19 +45,51 @@
         </ul>
       </nav>
     </div>
-    <div id="buttons" class="flex min-w-0 items-center justify-end gap-4 flex-shrink-0">
-      <button
-        @click="open = false"
-        class="topbar-button open-kapa-widget"
-      >
-        <span>Ask&nbsp;AI</span>
-        <span class="icon-svg-stroke">
-          {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
-        </span>
-      </button>
-      <div class="topbar-button" id="search-bar-container">
-         {{ partialCached "search-bar.html" "-" }}
+    <div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
+      <!-- Hide on small screens, show on md+ -->
+      <div class="hidden md:flex items-center gap-3">
+        <button
+          @click="open = false"
+          class="topbar-button open-kapa-widget"
+        >
+          <span class="hidden lg:inline">Ask&nbsp;AI</span>
+          <span class="icon-svg">
+            {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
+          </span>
+        </button>
+
+        <div class="topbar-button" id="search-bar-container">
+           {{ partialCached "search-bar.html" "-" }}
+        </div>
+
+        {{ partial "contact-support-button.html" "notext" }}
+
+        <button
+          aria-label="Theme switch"
+          id="theme-switch"
+          class="topbar-button-clear"
+          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>
+      <!-- On sm screens, hide all buttons here (they will be in sidebar) -->
+    </div>
+  </div>
+</header>
+        </button>
       </div>
+      <!-- On sm screens, hide all buttons here (they will be in sidebar) -->
     </div>
   </div>
 </header>