<header
	x-data="navbar"
	class="[view-transition-name:site-header] 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" . }}
