Doc right section fix

docs/assets/js/toc-scroll-spy.js

@@ -0,0 +1,93 @@
+/*
+ * TOC Scroll Spy
+ * Highlights the current section in the table of contents based on scroll position
+ */
+
+(function () {
+  'use strict';
+
+  // Wait for DOM to be ready
+  document.addEventListener('DOMContentLoaded', function () {
+    const toc = document.querySelector('.td-toc');
+    if (!toc) {
+      return; // No TOC on this page
+    }
+
+    // Get all TOC links
+    const tocLinks = toc.querySelectorAll('a[href^="#"]');
+    if (tocLinks.length === 0) {
+      return; // No anchor links in TOC
+    }
+
+    // Get all section headings
+    const sections = [];
+    tocLinks.forEach(function (link) {
+      const id = link.getAttribute('href').substring(1);
+      const section = document.getElementById(id);
+      if (section) {
+        sections.push({
+          id: id,
+          element: section,
+          link: link,
+        });
+      }
+    });
+
+    if (sections.length === 0) {
+      return; // No matching sections found
+    }
+
+    // Function to get the current active section
+    function getActiveSection() {
+      const scrollPosition = window.scrollY + 100; // Offset for better UX
+
+      // Find the section that's currently in view
+      for (let i = sections.length - 1; i >= 0; i--) {
+        const section = sections[i];
+        if (section.element.offsetTop <= scrollPosition) {
+          return section;
+        }
+      }
+
+      // If we're at the top of the page, return the first section
+      return sections[0];
+    }
+
+    // Function to update active state
+    function updateActiveLink() {
+      const activeSection = getActiveSection();
+
+      // Remove active class from all links
+      sections.forEach(function (section) {
+        section.link.classList.remove('active');
+      });
+
+      // Add active class to current link
+      if (activeSection) {
+        activeSection.link.classList.add('active');
+      }
+    }
+
+    // Throttle function to limit scroll event frequency
+    let scrollTimeout;
+    function throttledUpdate() {
+      if (scrollTimeout) {
+        window.cancelAnimationFrame(scrollTimeout);
+      }
+      scrollTimeout = window.requestAnimationFrame(function () {
+        updateActiveLink();
+      });
+    }
+
+    // Listen for scroll events
+    window.addEventListener('scroll', throttledUpdate);
+
+    // Initial update
+    updateActiveLink();
+
+    // Also update when hash changes (clicking on TOC links)
+    window.addEventListener('hashchange', function () {
+      setTimeout(updateActiveLink, 100);
+    });
+  });
+})();

docs/assets/scss/_styles_project.scss

@@ -75,3 +75,21 @@
 .medium-zoom-image--opened {
     z-index: 101;
 }
+
+.td-sidebar-toc {
+    a {
+        transition: all 0.3s ease-in-out;
+        border-left: 3px solid transparent;
+        padding-left: 8px;
+
+        &.active {
+            font-weight: 700 !important;
+            color: $primary !important;
+            border-left: 3px solid $primary;
+        }
+
+        &:hover {
+            color: $primary;
+        }
+    }
+}

docs/layouts/partials/scripts.html

@@ -9,8 +9,10 @@
 {{ end }}
 {{ $jsImageZoom := resources.Get "js/medium-zoom.js" }}
 {{ $jsNavbarVersionSelector := resources.Get "js/navbar-version-selector.js" }}
+{{ $jsTocScrollSpy := resources.Get "js/toc-scroll-spy.js" }}
 <script defer src="{{ $jsImageZoom.RelPermalink }}" integrity="{{ $jsImageZoom.Data.Integrity }}" crossorigin="anonymous"></script>
-{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsNavbarVersionSelector) | resources.Concat "js/main.js" }}
+{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsNavbarVersionSelector $jsTocScrollSpy) | resources.Concat "js/main.js" }}
+
 {{ if hugo.IsServer }}
 <script src="{{ $js.RelPermalink }}"></script>
 {{ else }}