<header
  x-data="navbar"
  class="print:hidden sticky top-0 z-50 bg-blue-950 flex flex-none flex-wrap items-center justify-between px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 dark:shadow-none"
  :class="$store.nav.scroll.atTop ? '': 'bg-blue-950/80'">
  <div class="relative flex basis-0 items-center mr-2 lg:mr-8">
    {{ with site.Home }}
      <a
        class="text-white text-xl font-bold upper"
        href="{{ .RelPermalink }}"
        aria-label="{{ .LinkTitle }}"
        >HUGO</a
      >
    {{ end }}
  </div>
  <div
    class="relative hidden sm:flex flex-grow basis-0 items-center min-w-24 max-w-3xl overflow-x-auto">
    {{ range .Site.Menus.global }}
      <a
        href="{{ .URL }}"
        class="font-semibold text-gray-300 hover:text-gray-400 ml-4"
        >{{ .Name }}</a
      >
    {{ end }}


    <div class="hidden 2xl:block ml-8 text-xs text-gray-400 dark:text-gray-400">
      {{ with  hugo.Version }}

        Built with Hugo
        {{ if strings.Contains . "-DEV" }}
          v{{ . }}
        {{ else }}
          <a
            class="text-blue-600 hover:text-blue-500 ml-1"
            href="{{ printf `https://github.com/gohugoio/hugo/releases/tag/v%s` . }}"
            >v{{ . }}</a
          >
        {{ end }}
      {{ end }}

    </div>
  </div>

  <div class="-my-5 pl-0 sm:pl-2 grow-0 flex items-center gap-0">
    {{/* Search. */}}
    {{ partial "layouts/search/input.html" . }}
    {{/* Theme selector - shown inline on mobile */}}
    <div class="sm:hidden">
      {{ partial "layouts/header/theme.html" . }}
    </div>
  </div>
  <div
    class="relative hidden sm:flex ml-0 md:ml-8 content-center basis-0 justify-end gap-0 sm:gap-1 xl:grow-1">
    {{/* QR code. */}}
    {{ partial "layouts/header/qr.html" . }}
    {{/* Theme selector - hidden on mobile (shown above) */}}
    {{ partial "layouts/header/theme.html" . }}

    {{/* Social. */}}
    <div
      class="hidden sm:block ml-2 sm:ml-6 h-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300">
      {{ partial "layouts/header/githubstars.html" . }}
    </div>
    <div
      class="hidden sm:block ml-2 sm:ml-6 h-6">
      {{ partial "layouts/header/mastodon.html" . }}
    </div>
  </div>

  {{/* Mobile menu hamburger button - only visible on small screens */}}
  <button
    @click="$store.nav.mobileMenu.toggle()"
    class="sm:hidden p-2 ml-2 text-gray-300 hover:text-white rounded-md hover:bg-blue-900 transition-colors"
    aria-label="Open menu"
    :aria-expanded="$store.nav.mobileMenu.open">
    <svg class="w-6 h-6">
      <use href="#icon--bars-3"></use>
    </svg>
  </button>
</header>

{{/* Mobile menu panel */}}
{{ partial "layouts/header/mobilemenu.html" . }}
