mirror of
https://github.com/docker/docs.git
synced 2026-03-27 06:18:55 +07:00
00da2c5f7f
Simplify the footer. <img width="1238" height="516" alt="screen" src="https://github.com/user-attachments/assets/fe397763-28ab-4ad4-84d5-ba3fc9767885" />
96 lines
3.2 KiB
HTML
96 lines
3.2 KiB
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">
|
|
<!-- Hide on small screens, show on md+ -->
|
|
<div class="hidden md:flex items-center gap-3">
|
|
<button
|
|
@click="open = false"
|
|
class="topbar-button open-kapa-widget"
|
|
>
|
|
<span class="hidden lg:inline">Ask AI</span>
|
|
<span class="icon-svg">
|
|
{{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
|
|
</span>
|
|
</button>
|
|
|
|
<div class="topbar-button" id="search-bar-container">
|
|
{{ partialCached "search-bar.html" "-" }}
|
|
</div>
|
|
|
|
{{ partial "contact-support-button.html" "notext" }}
|
|
|
|
<button
|
|
aria-label="Theme switch"
|
|
id="theme-switch"
|
|
class="topbar-button-clear"
|
|
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 icon-sm dark:hidden"
|
|
>{{ partialCached "icon" "icons/sun.svg" "sun" }}
|
|
</span>
|
|
<span class="icon-svg icon-sm hidden dark:block">
|
|
{{ partialCached "icon" "icons/moon.svg" "moon" }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<!-- On sm screens, hide all buttons here (they will be in sidebar) -->
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</button>
|
|
</div>
|
|
<!-- On sm screens, hide all buttons here (they will be in sidebar) -->
|
|
</div>
|
|
</div>
|
|
</header>
|