From e2199146d03c8e50c45b84c48673b5664a505972 Mon Sep 17 00:00:00 2001
From: Juho Ervasti <juho.ervasti@gispo.fi>
Date: Thu, 15 Feb 2024 12:24:27 +0200
Subject: [PATCH 1/2] Add sidebar scrolling and highlighting to nav-script.js
 and style for highlit in custom.css

---
 assets/custom.css       | 13 ++++++--
 assets/js/nav-script.js | 69 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index ae89be4..7de97d6 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -4,14 +4,23 @@
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;700&display=swap");
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
 
-/* test */
-
 /* to-do */
 .todo {
     background-color: red;
     color:#eeeeee;
 }
 
+.in-view {
+  background-color: #edc949;
+
+  padding-left: 2em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 2em;
+
+  border-radius: 0.5em;
+}
+
 /* Generics */
 body { overflow-x: hidden; }
 
diff --git a/assets/js/nav-script.js b/assets/js/nav-script.js
index c14245b..584bf28 100644
--- a/assets/js/nav-script.js
+++ b/assets/js/nav-script.js
@@ -3,4 +3,71 @@ function navToggle() {
   sidebar.classList.toggle('show');
   let hamburger = document.querySelector('.hamburger')
   hamburger.classList.toggle('is-active');
-}
\ No newline at end of file
+}
+
+const sidebarLinks = document.querySelectorAll('.sidebar-nav a');
+const documentFileName = window.location.pathname.split('/').pop();
+
+var matchingLinks = [];
+
+sidebarLinks.forEach(function(link) {
+  var linkHref = link.getAttribute('href').split('#')[0];
+  var linkFileName = linkHref.split('/').pop();
+  if (linkFileName === documentFileName)
+    matchingLinks.push(link);
+
+});
+
+
+const headers = document.querySelectorAll(
+  "h1:not(.sidebar-nav h1), " +
+  "h2, " +
+  "h3"
+);
+
+
+// // Jump to to current document's title in the sidebar
+
+document.addEventListener('DOMContentLoaded', function() {
+  var pageTitle = document.title;
+
+  var targetLink = null;
+
+  matchingLinks.forEach(function(link) {
+    if (pageTitle.includes(link.textContent.trim())) 
+    {
+      targetLink = link;
+      return;
+    }
+  });
+
+  if (targetLink) {
+    targetLink.classList.add('in-view');
+    targetLink.scrollIntoView({
+      behavior: 'instant',
+      block: 'center'
+    });
+  }
+});
+
+// Highlight the header in the sidebar you're currently scrolling at in the main body
+
+window.addEventListener("scroll", () => {
+  headers.forEach((header) => {
+    const headerTop = header.offsetTop;
+    const headerHeight = header.clientHeight;
+
+    if (scrollY >= (headerTop - 100) - headerHeight)
+    {
+      current = header;
+    }
+
+    matchingLinks.forEach((link) => {
+      link.classList.remove("in-view");
+      if (link.textContent == current.textContent)
+      {
+        link.classList.add('in-view');
+      }
+    });
+  });
+});

From 30a14c21102ddbc87134e33be98526d0021c1a60 Mon Sep 17 00:00:00 2001
From: Juho Ervasti <juho.ervasti@gispo.fi>
Date: Thu, 15 Feb 2024 14:10:18 +0200
Subject: [PATCH 2/2] Fine-tune highlight style and scroll threshold

---
 assets/custom.css       | 9 +++++----
 assets/js/nav-script.js | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 7de97d6..558c1a8 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -13,10 +13,10 @@
 .in-view {
   background-color: #edc949;
 
-  padding-left: 2em;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 2em;
+  padding-left: 5%;
+  padding-top: 2%;
+  padding-bottom: 2%;
+  padding-right: 10%;
 
   border-radius: 0.5em;
 }
@@ -488,3 +488,4 @@ code span {
 @media (max-width: 767px) {
     .level1 { padding: 60px 10px; }
 }
+
diff --git a/assets/js/nav-script.js b/assets/js/nav-script.js
index 584bf28..a5b5288 100644
--- a/assets/js/nav-script.js
+++ b/assets/js/nav-script.js
@@ -57,7 +57,7 @@ window.addEventListener("scroll", () => {
     const headerTop = header.offsetTop;
     const headerHeight = header.clientHeight;
 
-    if (scrollY >= (headerTop - 100) - headerHeight)
+    if (scrollY >= (headerTop - 50) - headerHeight)
     {
       current = header;
     }
@@ -71,3 +71,4 @@ window.addEventListener("scroll", () => {
     });
   });
 });
+