Merge pull request #10 from GispoCoding/add-sidebar-functionalities

REPO: Tämän hetkisen kappaleen korostus sivupalkissa ja sivupalkin siirtyminen kappaleen kohdalle

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: 5%;
+  padding-top: 2%;
+  padding-bottom: 2%;
+  padding-right: 10%;
+
+  border-radius: 0.5em;
+}
+
 /* Generics */
 body { overflow-x: hidden; }
 
@@ -479,3 +488,4 @@ code span {
 @media (max-width: 767px) {
     .level1 { padding: 60px 10px; }
 }
+

assets/js/nav-script.js

@@ -3,4 +3,72 @@ function navToggle() {
   sidebar.classList.toggle('show');
   let hamburger = document.querySelector('.hamburger')
   hamburger.classList.toggle('is-active');
-}
+}
+
+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 - 50) - headerHeight)
+    {
+      current = header;
+    }
+
+    matchingLinks.forEach((link) => {
+      link.classList.remove("in-view");
+      if (link.textContent == current.textContent)
+      {
+        link.classList.add('in-view');
+      }
+    });
+  });
+});
+