mirror of https://github.com/docker/docs.git
48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<header
|
|
class="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="mx-auto flex 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="$dispatch('togglesidebar')"
|
|
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>
|
|
<ul class="mt-1 box-content hidden gap-4 md:flex">
|
|
{{ 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 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>
|