Fix: SideBar Functionality

OneBusAway · Mar 24, 2024 · 1cfb91b · 1cfb91b
1 parent dce255b
commit 1cfb91b
Showing 1 changed file with 28 additions and 8 deletions.
diff --git a/frontend/javascript/page_navigation.js b/frontend/javascript/page_navigation.js
@@ -19,20 +19,30 @@ export function enableScrollToTop() {
 export function setupSidebar() {
   const h1Elements = document.querySelectorAll('h1');
   const h2Elements = document.querySelectorAll('article h2');
+  if (h2Elements.length === 0) {
+    // If there are no h2 headings, do not set up the sidebar
+    return;
+  }
   const sidebar = document.querySelector('.sidebar');
-
   function appendSidebarItem(textContent, tagName) {
     const newItem = document.createElement('a');
     newItem.textContent = textContent;
-    if (tagName === 'h1') {
-      newItem.classList.add('sidebar-item', 'text-green-500');
-    }
-    else if (tagName === 'h2') {
+    if (tagName === 'h2') {
       newItem.classList.add('sidebar-item-h2', 'text-gray-500', 'hover:text-green-400', 'ml-4', 'cursor-pointer');
     }
     sidebar.appendChild(newItem);
 
     newItem.addEventListener('click', function() {
+      const allSidebarItems = document.querySelectorAll('.sidebar a');
+      allSidebarItems.forEach(function(item) {
+        item.style.color = ''; // Reset color
+        item.style.fontWeight='';
+      });
+
+      // Change color of clicked item
+      newItem.style.color = '#34D399';
+      newItem.style.fontWeight='bold';
+
       const currentVersion = newItem.textContent;
       const headings = document.querySelectorAll('h2');
       let targetElement = null;
@@ -47,13 +57,23 @@ export function setupSidebar() {
     });
   }
 
-  h1Elements.forEach(function (element) {
-    appendSidebarItem(element.textContent, 'h1');
-  });
+  const sidebarHeading = document.createElement('div');
+  sidebarHeading.textContent = 'ON THIS PAGE';
+  sidebarHeading.classList.add('sidebar-heading');
+  sidebarHeading.style.color = '#34D399';
+  sidebarHeading.style.fontSize = '15px';
+  sidebarHeading.style.fontWeight='bold';
+  sidebarHeading.style.paddingBottom='15px';
+  sidebar.appendChild(sidebarHeading);
 
   h2Elements.forEach(function (element) {
     appendSidebarItem(element.textContent, 'h2');
   });
+
+  const h2Items = document.querySelectorAll('.sidebar-item-h2');
+  h2Items.forEach(item => {
+    item.style.paddingTop = '5px';
+  });
 }
 
 export function saveAndRestoreNavigationPosition() {