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

site: automatically scroll down the sidebar to reveal the current page 

Some pages are nested quite deep in the sidebar, which means they aren't
automatically visible on pageload unless the sidebar is scrolled. This
commit adds a scrolldown function to the sidebar to check if the element
representing the current page is in view. If it isn't, the sidebar is
scrolled down to a position where the current page comes into view.

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-10-10 12:28:21 +02:00
parent 47fcaeb6af
commit 0f80eeae07
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" . }}
<main class="relative flex w-full max-w-[1920px]">
<!-- 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="{ 'hidden': ! $store.showSidebar }">
<!-- Gray backdrop on small screens -->

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

@ -34,7 +34,8 @@
<div class="w-full py-2 truncate">
{{- if .Permalink }}
{{/* 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 }}">
{{ template "renderTitle" . }}
</a>
@ -74,7 +75,7 @@
{{ $isCurrent := eq page . }}
<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 }}">
<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 }}">
{{ template "renderTitle" . }}
</a>