mirror of
https://github.com/docker/docs.git
synced 2026-03-27 14:28:47 +07:00
69 lines
2.7 KiB
HTML
69 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
{{ partial "head.html" . }}
|
|
</head>
|
|
|
|
<body
|
|
class="flex flex-col items-center bg-gradient-to-r from-background-light from-20% to-white to-30% text-base dark:from-gray-dark-100 dark:to-background-dark dark:text-white">
|
|
{{ partial "header.html" . }}
|
|
<main class="relative flex w-full max-w-[1920px]">
|
|
<!-- Sidebar -->
|
|
<div x-data
|
|
class="md:h-[calc(100vh - 64px)] sticky top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 sm:w-full md:z-auto md:block md:w-[300px]"
|
|
: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="z-50 w-full bg-background-light p-4 dark:bg-gray-dark-100 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>
|
|
<!-- Main navigation -->
|
|
<div x-data="{ expanded: false }">
|
|
<div class="px-4 flex w-full items-center justify-between">
|
|
<a class="text-lg flex-grow" href="{{ .FirstSection.Permalink }}">{{ .FirstSection.LinkTitle }}</a>
|
|
<button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
|
|
<span :class="{ 'rotate-180': expanded }" class="icon-svg transform transition-transform">
|
|
{{ partialCached "icon" "expand_more" "expand_more" }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<ul x-cloak x-show="expanded" class="mt-2 space-y-2 px-2">
|
|
{{ range site.Menus.main }}
|
|
{{ if ne page.FirstSection .Page }}
|
|
<li>
|
|
<a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
|
|
</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
<hr class="my-2 text-gray-light-200 dark:text-gray-dark-300" />
|
|
<!-- Actual Sidebar Content -->
|
|
{{ block "left" . }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
|
|
class="w-full min-w-0 bg-white p-8 dark:bg-background-dark">
|
|
{{ block "main" . }}
|
|
{{ end }}
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="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>
|