mirror of https://github.com/docker/docs.git
47 lines
2.0 KiB
HTML
47 lines
2.0 KiB
HTML
<header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-gradient-to-r from-blue-light-600 to-blue-light dark:from-blue-dark-200 to-50% dark:to-blue-dark-100">
|
|
<div class="max-w-[1920px] mx-auto flex gap-8 h-full items-center justify-between">
|
|
<div class="flex h-full items-center md:gap-8 gap-2">
|
|
{{- if not .IsHome }}
|
|
<button x-data @click="$store.showSidebar = true"
|
|
class="icon-svg block px-4 md:hidden h-full" aria-label="Menu">
|
|
{{ partialCached "icon" "menu" "menu" }}
|
|
</button>
|
|
{{- end }}
|
|
<div>
|
|
{{/* main logo */}}
|
|
<a title="Docker Docs home page" href="{{ site.BaseURL }}">
|
|
<div>
|
|
{{- (resources.Get "images/docker-docs-white.svg").Content | safe.HTML -}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<nav class="mt-1 hidden md:block">
|
|
<ul class="flex gap-4">
|
|
{{ range site.Menus.main }}
|
|
<li
|
|
{{- if or (eq page .Page) (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" href="{{ .URL }}">{{ .Name }}</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="flex min-w-0 items-center gap-6 flex-grow justify-end">
|
|
{{ partialCached "search-bar.html" "-" }}
|
|
<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>
|