mirror of
https://github.com/docker/docs.git
synced 2026-03-27 22:38:54 +07:00
114 lines
4.2 KiB
HTML
114 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
{{ partial "head.html" . }}
|
|
</head>
|
|
|
|
<body
|
|
class="dark:bg-navbar-bg-dark bg-navbar-bg flex flex-col items-center text-base text-black dark:text-white"
|
|
>
|
|
{{ partial "header.html" . }}
|
|
<main class="relative flex w-full max-w-[1920px]">
|
|
<!-- Sidebar -->
|
|
<div
|
|
style="scroll-behavior: smooth;"
|
|
x-data
|
|
x-init="$nextTick(() => {
|
|
const container = $el; // The div with overflow
|
|
const item = document.getElementById('sidebar-current-page')
|
|
if (item) {
|
|
const containerTop = container.scrollTop;
|
|
const containerBottom = containerTop + container.clientHeight;
|
|
|
|
const itemTop = item.offsetTop - container.offsetTop;
|
|
const itemBottom = itemTop + item.offsetHeight;
|
|
|
|
// Scroll only if the item is out of view
|
|
if (itemBottom > containerBottom - 200) {
|
|
container.scrollTop = itemTop - (container.clientHeight / 2 - item.offsetHeight / 2);
|
|
}
|
|
}
|
|
})"
|
|
class="bg-background-toc dark:bg-background-toc fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]"
|
|
:class="{ 'hidden': ! $store.showSidebar }"
|
|
>
|
|
<!-- Gray backdrop on small screens -->
|
|
<div
|
|
class="fixed bg-black/50 md:hidden"
|
|
x-show="$store.showSidebar"
|
|
@click="openSidebar = false"
|
|
x-transition.opacity
|
|
></div>
|
|
<div
|
|
class="bg-background-toc dark:bg-background-toc z-50 w-full p-3 md:block md:w-[300px]"
|
|
>
|
|
<!-- Collapse button for small screens -->
|
|
<button class="my-4 md:hidden" @click="$store.showSidebar = false">
|
|
<span class="icon-svg"
|
|
>{{ partialCached "icon" "arrow_left_alt" "arrow_left_alt" }}</span
|
|
>
|
|
Back
|
|
</button>
|
|
<!-- Top nav buttons appear here on sm width -->
|
|
<div class="flex flex-col gap-2 md:hidden mb-4">
|
|
<button
|
|
@click="open = false"
|
|
class="topbar-button open-kapa-widget w-full flex items-center gap-2"
|
|
>
|
|
<span>Ask AI</span>
|
|
<span class="icon-svg">
|
|
{{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
|
|
</span>
|
|
</button>
|
|
<div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
|
|
{{ partialCached "search-bar.html" "-" }}
|
|
</div>
|
|
{{ partial "contact-support-button.html" .}}
|
|
<button
|
|
aria-label="Theme switch"
|
|
id="theme-switch"
|
|
class="topbar-button flex items-center"
|
|
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>
|
|
<!-- Actual Sidebar Content -->
|
|
{{ block "left" . }}
|
|
{{ partial "sidebar/mainnav.html" . }}
|
|
{{ partial "sidebar/sections.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div
|
|
{{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
|
|
class="dark:bg-background-dark w-full min-w-0 bg-white p-8"
|
|
>
|
|
{{ block "main" . }}
|
|
{{ end }}
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="relative z-10 w-full">
|
|
{{ partialCached "footer.html" . }}
|
|
</footer>
|
|
|
|
{{/* Load the YouTube player if the page embeds a YouTube video */}}
|
|
{{ with .Store.Get "youtube" }}
|
|
{{ partial "youtube-script.html" . }}
|
|
{{ end }}
|
|
</body>
|
|
</html>
|