docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21099 from dvdksn/sidebar-scrolldown 

site: automatically scroll down the sidebar to reveal the current page
This commit is contained in:
David Karlsson 2024-10-10 13:45:57 +02:00 committed by GitHub
parent 47fcaeb6af 0f80eeae07
commit c9bb762084
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
layouts/_default/baseof.html
View File

@ -10,7 +10,22 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main class="relative flex w-full max-w-[1920px]"> <main class="relative flex w-full max-w-[1920px]">
<!-- Sidebar --> <!-- Sidebar -->
<div x-data <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="md:h-[calc(100vh - 64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]" class="md:h-[calc(100vh - 64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
:class="{ 'hidden': ! $store.showSidebar }"> :class="{ 'hidden': ! $store.showSidebar }">
<!-- Gray backdrop on small screens --> <!-- Gray backdrop on small screens -->

5
layouts/partials/sidebar/sections.html
View File

@ -34,7 +34,8 @@
<div class="w-full py-2 truncate"> <div class="w-full py-2 truncate">
{{- if .Permalink }} {{- if .Permalink }}
{{/* If the link is not empty, use it */}} {{/* If the link is not empty, use it */}}
<a class="block select-none hover:text-blue-light hover:dark:text-blue-dark" <a {{ if $isCurrent }}aria-current="page" id="sidebar-current-page" {{ end }}
class="block select-none hover:text-blue-light hover:dark:text-blue-dark"
href="{{ .Permalink }}"> href="{{ .Permalink }}">
{{ template "renderTitle" . }} {{ template "renderTitle" . }}
</a> </a>
@ -74,7 +75,7 @@
{{ $isCurrent := eq page . }} {{ $isCurrent := eq page . }}
<li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark <li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark
{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}"> {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
<a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block" <a {{ if $isCurrent }}aria-current="page" id="sidebar-current-page" {{ end }} class="py-2 w-full truncate block"
href="{{ .Permalink }}" title="{{ .LinkTitle }}"> href="{{ .Permalink }}" title="{{ .LinkTitle }}">
{{ template "renderTitle" . }} {{ template "renderTitle" . }}
</a> </a>