fix: Added support for active class on clicking the side tab items (#177)

* added support for active class on clicking the side tab items

* implemented scrollspy for auto section update in sidebar

Author: Recxsmacx

src/js/app.js

@@ -53,6 +53,22 @@ const SpeedTest = {
 
     // Initialize gauge
     ProgressGauge.init();
+
+    // Scrollspy: update active nav link based on which section is in view
+    const sections = document.querySelectorAll('#wrapper > section[id]');
+    const navLinks = document.querySelectorAll('#sidebar nav a');
+
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          navLinks.forEach(link => {
+            link.classList.toggle('active', link.getAttribute('href') === '#' + entry.target.id);
+          });
+        }
+      });
+    }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });
+
+    sections.forEach(section => observer.observe(section));
   },
 
   onPrivacyChange() {