Enhance command TOC styling and add active section tracking

Improved the appearance and responsiveness of the command table of contents (TOC) with updated CSS, including better dark mode support and mobile layout. Added JavaScript to highlight the active TOC link based on scroll position, improving navigation and user experience.

Author: potatoqualitee

static/css/command-docs.css

@@ -327,44 +327,98 @@ article table tbody tr:hover {
 
 /* Table of Contents */
 .command-toc {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
   margin-bottom: 2rem;
-  font-size: 1.1rem;
-  color: #59636e;
-  text-align: center;
-  display: block;
-  width: 100%;
+  padding: 0.875rem 1.25rem;
+  background: #f6f8fa;
+  border: 1px solid #d1d9e0;
+  border-left: 3px solid #22C55E;
+  border-radius: 8px;
+  font-size: 0.9rem;
 }
 
 .command-toc .toc-label {
-  font-weight: 600;
-  color: #1f2328;
+  font-weight: 500;
+  color: #59636e;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin-right: 0.5rem;
 }
 
 .command-toc a {
-  color: #0969da;
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  color: #1f2328;
   text-decoration: none;
-  transition: color 0.15s ease;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  font-weight: 500;
+  background: transparent;
 }
 
 .command-toc a:hover {
   color: #22C55E;
-  text-decoration: underline;
+  background: rgba(34, 197, 94, 0.1);
+  text-decoration: none;
+}
+
+.command-toc a:focus {
+  outline: 2px solid #22C55E;
+  outline-offset: 2px;
+}
+
+/* Active state for current section (requires JS) */
+.command-toc a.active {
+  color: #22C55E;
+  background: rgba(34, 197, 94, 0.12);
 }
 
 .dark .command-toc {
-  color: #9198a1;
+  background: #1c2128;
+  border-color: #30363d;
+  border-left-color: #22C55E;
 }
 
 .dark .command-toc .toc-label {
-  color: #e6edf3;
+  color: #9198a1;
 }
 
 .dark .command-toc a {
-  color: #60A5FA;
+  color: #e6edf3;
 }
 
 .dark .command-toc a:hover {
   color: #22C55E;
+  background: rgba(34, 197, 94, 0.15);
+}
+
+.dark .command-toc a.active {
+  color: #22C55E;
+  background: rgba(34, 197, 94, 0.18);
+}
+
+/* Mobile: stack vertically */
+@media (max-width: 640px) {
+  .command-toc {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .command-toc .toc-label {
+    margin-bottom: 0.5rem;
+    margin-right: 0;
+  }
+
+  .command-toc a {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+  }
 }
 
 /* Section anchor - positioned above heading so scroll lands at heading */

themes/dbatools2025/layouts/commands/single.html

@@ -87,6 +87,9 @@
 
     // Add copy buttons to code blocks
     addCopyButtons();
+
+    // Initialize TOC active state tracking
+    initTocActiveState();
 });
 
 function addCopyButtons() {
@@ -170,6 +173,57 @@
 
     return cleanLines.join('\n');
 }
+
+function initTocActiveState() {
+    const toc = document.querySelector('.command-toc');
+    if (!toc) return;
+
+    const tocLinks = toc.querySelectorAll('a[href^="#"]');
+    if (tocLinks.length === 0) return;
+
+    // Get all section anchors
+    const sections = [];
+    tocLinks.forEach(link => {
+        const id = link.getAttribute('href').substring(1);
+        const anchor = document.getElementById(id);
+        if (anchor) {
+            sections.push({ id, anchor, link });
+        }
+    });
+
+    if (sections.length === 0) return;
+
+    // Throttled scroll handler
+    let ticking = false;
+    function updateActiveLink() {
+        const scrollPos = window.scrollY + 120; // Offset for fixed header
+
+        let activeSection = sections[0];
+        for (const section of sections) {
+            if (section.anchor.offsetTop <= scrollPos) {
+                activeSection = section;
+            }
+        }
+
+        tocLinks.forEach(link => link.classList.remove('active'));
+        if (activeSection) {
+            activeSection.link.classList.add('active');
+        }
+    }
+
+    window.addEventListener('scroll', () => {
+        if (!ticking) {
+            requestAnimationFrame(() => {
+                updateActiveLink();
+                ticking = false;
+            });
+            ticking = true;
+        }
+    });
+
+    // Set initial active state
+    updateActiveLink();
+}
 </script>
 
 <style>