Merge pull request #21260 from dvdksn/fix-site-header-sm-screens

site: improve header display on small devices

hugo_stats.json

@@ -41,6 +41,7 @@
       "Docker-Compose",
       "Docker-Desktop",
       "Docker-Hub",
+      "Docker-Scout-Dashboard",
       "Download",
       "Editor-or-IDE",
       "Entra-ID",
@@ -86,6 +87,7 @@
       "Node",
       "Non-compliant",
       "Okta",
+      "Okta-SAML",
       "Old-Dockerfile",
       "PHP",
       "PowerShell",
@@ -469,6 +471,7 @@
       "self-start",
       "shadow",
       "shadow-lg",
+      "sm:block",
       "sm:flex",
       "sm:flex-row",
       "sm:hidden",
@@ -479,7 +482,6 @@
       "space-y-4",
       "sticky",
       "svg-container",
-      "svg-icon",
       "syntax-light",
       "systemd-networkd",
       "text-2xl",

layouts/partials/footer.html

@@ -62,10 +62,33 @@
           >Legal</a>
       </div>
     </div>
-    <div>
+    <div class="flex justify-between items-center">
       <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="rounded bg-blue-light px-4 py-1 text-white transition
+          hover:bg-blue-light-400 dark:bg-blue-dark-400
+          dark:hover:bg-blue-dark"
+          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

@@ -10,9 +10,12 @@
       <div>
         {{/* main logo */}}
         <a title="Docker Docs home page" href="{{ site.BaseURL }}">
-          <div>
+          <div class="hidden sm:block">
             {{- (resources.Get "images/docker-docs-white.svg").Content | safe.HTML -}}
           </div>
+          <div class="block sm:hidden">
+            {{- (resources.Get "images/docker-docs-white-condensed.svg").Content | safe.HTML -}}
+          </div>
         </a>
       </div>
       <nav class="mt-1 hidden md:block">
@@ -37,15 +40,6 @@
         <span>Ask&nbsp;AI</span>
         <img src="{{ (resources.Get "images/ai-stars.svg").Permalink }}" alt="AI Stars" />
       </button>
-      <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
-        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 dark:hidden">{{ partialCached "icon" "light_mode" "light_mode"}}</span>
-        <span class="icon-svg hidden dark:block">{{ partialCached "icon" "dark_mode" "dark_mode"}}</span>
-      </button>
     </div>
   </div>
-
 </header>