From 0f80eeae07f8583795523937cef535718b339cec Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 10 Oct 2024 12:28:21 +0200
Subject: [PATCH] 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>
---
 layouts/_default/baseof.html           | 17 ++++++++++++++++-
 layouts/partials/sidebar/sections.html |  5 +++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1629ee6933..f75c74e73b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -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 -->
diff --git a/layouts/partials/sidebar/sections.html b/layouts/partials/sidebar/sections.html
index 6dcb7b54c0..fff61376a8 100644
--- a/layouts/partials/sidebar/sections.html
+++ b/layouts/partials/sidebar/sections.html
@@ -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>