vdoc: scroll indicator

cmd/tools/vdoc-resources/doc.css

@@ -16,9 +16,9 @@
 	--menu-toggle-icon-color: #fff;
 	--menu-toggle-icon-hover-color: #00000044;
 	--menu-search-background-color: #00000044;
-	--menu-search-text-color: #fff;
+	--menu-search-font-color: #fff;
 	--toc-text-color: #2779bd;
-	--toc-indent-line-color: #dae1e7;
+	--toc-indicator-color: #4299e1;
 	--code-default-text-color: #5c6e74;
 	--code-background-color: #edf2f7;
 	--code-keyword-text-color: #2b6cb0;
@@ -53,9 +53,9 @@
 	--menu-scrollbar-color: #4a5568;
 	--menu-toggle-icon-color: #fff;
 	--menu-search-background-color: #4a5568;
-	--menu-search-text-color: #fff;
+	--menu-search-font-color: #fff;
 	--toc-text-color: #90cdf4;
-	--toc-indent-line-color: #1a202c;
+	--toc-indicator-color: #4299e1;
 	--code-default-text-color: #cbd5e0;
 	--code-background-color: #2d3748;
 	--code-builtin-text-color: #68d391;
@@ -376,22 +376,26 @@ body {
 	text-overflow: ellipsis;
 	display: block;
 	text-decoration: none;
+	border-left-width: 2px;
+	border-left-style: solid;
+	border-color: transparent;
+	padding-left: 0.4rem;
 }
 .doc-toc a:hover {
 	text-decoration: underline;
 }
+.doc-toc a.active {
+	border-color: #4299e1;
+	border-color: var(--toc-indicator-color);
+}
 .doc-toc li ul {
-	border-color: #dae1e7;
-	border-color: var(--toc-indent-line-color);
-	border-left-width: 2px;
-	border-left-style: solid;
-	padding-left: 0.8rem;
 	margin: 0.2rem 0 0.2rem;
 	font-size: 0.7rem;
 	list-style: none;
 }
 .doc-toc li ul a {
 	font-weight: 400;
+	padding-left: 0.8rem;
 }
 
 /* Code highlight */

cmd/tools/vdoc-resources/doc.js

@@ -1,11 +1,52 @@
 (function() {
-    if (!!document.body.scrollIntoView) {
+    if (document.body.scrollIntoView) {
         var docnav = document.querySelector('.doc-nav');
         var active = docnav.querySelector('li.active');
-        active && active.scrollIntoView({ block: 'center', inline: 'nearest' });
+        if (active) {
+            active.scrollIntoView({ block: 'center', inline: 'nearest' });
         }
+    }
+    setupScrollSpy();
+    setupMobileToggle();
+    setupDarkMode();
+    setupSearch();
+    setupCollapse();
+})();
 
-    // Mobile view menu toggle button
+function setupScrollSpy() {
+    var sectionPositions = [];
+    var sections = document.querySelectorAll('section');
+    sections.forEach(function(section) {
+        sectionPositions.push(section.offsetTop);
+    });
+    window.addEventListener('scroll', function() {
+        // Reset classes
+        document.querySelectorAll('.doc-toc a[class="active"]').forEach(function(link) {
+            link.classList.remove('active');
+        });
+        // Set current menu link as active
+        var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
+        for (var i = 0; i < sectionPositions.length; i++) {
+            var section = sections[i];
+            var position = sectionPositions[i];
+            if (position >= scrollPosition) {
+                var link = document.querySelector('.doc-toc a[href="#' + section.id + '"]');
+                if (link) {
+                    link.classList.add('active');
+                    var docToc = document.querySelector('.doc-toc');
+                    if (link.scrollIntoViewIfNeeded) {
+                        link.scrollIntoViewIfNeeded();
+                    } else if (link.scrollIntoView) {
+                        link.scrollIntoView();
+                    }
+                }
+                break;
+            }
+        }
+    });
+}
+
+function setupMobileToggle() {
     var toggle = document.getElementById('toggle-menu');
     toggle.addEventListener('click', function(ev) {
         document.querySelectorAll('.doc-nav').forEach(function(el) {
@@ -16,8 +57,9 @@
             el.classList.toggle('show');
         });
     });
+}
 
-    // Dark mode
+function setupDarkMode() {
     var html = document.getElementsByTagName('html')[0];
     var darkModeToggle = document.getElementById('dark-mode-toggle');
     darkModeToggle.addEventListener('click', function() {
@@ -34,8 +76,9 @@
     if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
         darkModeToggle.style.visibility = 'unset';
     }
+}
 
-    // Search
+function setupSearch() {
     var searchInput = document.getElementById('search');
     searchInput.addEventListener('input', function(e) {
         var searchValue = e.target.value.toLowerCase();
@@ -60,8 +103,9 @@
             menuItem.style.display = !searchValue || hasResult ? '' : 'none';
         }
     });
+}
 
-    // Collapse
+function setupCollapse() {
     var dropdownArrows = document.querySelectorAll('.dropdown-arrow');
     for (var i = 0; i < dropdownArrows.length; i++) {
         var dropdownArrow = dropdownArrows[i];
@@ -70,4 +114,4 @@
             parent.classList.toggle('open');
         });
     }
-})();
+}