docker-docs/layouts/_partials/header.html

<header
  class="sticky top-0 z-20 h-16 w-full bg-blue-600 text-white"
>
  <div
    class="flex h-full justify-between gap-2 mx-auto px-4"
  >
    <div class="flex h-full items-center gap-2 lg:gap-8">
      {{- if not .IsHome }}
        <button
          x-data
          @click="$store.showSidebar = true"
          class="icon-svg block h-full px-4 md:hidden"
          aria-label="Menu"
        >
          {{ partialCached "icon" "menu" "menu" }}
        </button>
      {{- end }}
      <div>
        {{/* main logo */}}
        <a title="Docker Docs home page" href="{{ site.BaseURL }}">
          <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:flex lg:flex xl:flex 2xl:flex">
        {{/* main menu */}}
        <ul class="flex text-sm md:text-base lg:gap-4">
          {{ range site.Menus.main }}
            <li
              {{- if or (eq page.Permalink .Page.Permalink) (page.IsDescendant .Page) }}
                class="border-b-4"
              {{- else }}
                class="border-b-4 border-transparent hover:border-white/20"
              {{- end }}
            >
              <a class="block px-2 py-1 whitespace-nowrap" href="{{ .URL }}"
                >{{ .Name }}</a
              >
            </li>
          {{ end }}
        </ul>
      </nav>
    </div>
    <div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
      <div class="flex items-center gap-2">
        <div data-tooltip-wrapper class="relative">
          <button
            x-data
            @click="$store.gordon.toggle()"
            aria-label="Ask Gordon, AI assistant"
            aria-describedby="gordon-tooltip"
            class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 shimmer open-kapa-widget"
          >
            <span class="icon-svg">
              {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
            </span>
            <span class="hidden px-1 lg:inline">Gordon</span>
          </button>
          <div
            id="gordon-tooltip"
            data-tooltip-body
            class="absolute top-0 left-0 hidden whitespace-nowrap rounded-sm bg-gray-900 p-2 text-sm text-white"
            role="tooltip"
          >
            Ask Gordon — AI assistant for Docker docs
            <div data-tooltip-arrow class="absolute h-2 w-2 rotate-45 bg-gray-900"></div>
          </div>
        </div>

        <div id="search-bar-container">
           {{ partialCached "search-bar.html" "-" }}
        </div>

        <button
          aria-label="Theme switch"
          id="theme-switch"
          class="cursor-pointer p-2 rounded-lg bg-blue-700 border border-blue-500 hover:bg-blue-800 hover:border-blue-400 transition-colors focus:outline-none focus:ring focus:ring-blue-400"
          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" "icons/sun.svg" "sun" }}
          </span>
          <span class="icon-svg hidden dark:block">
            {{ partialCached "icon" "icons/moon.svg" "moon" }}
          </span>
        </button>
      </div>
    </div>
  </div>
</header>