Clean up code and styling from introduction of right sidebar

OneBusAway · Mar 20, 2024 · 36c873f · 36c873f
1 parent 2e176e1
commit 36c873f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 50 deletions.
diff --git a/frontend/javascript/index.js b/frontend/javascript/index.js
@@ -10,8 +10,7 @@ import {
 import {
   enableScrollToTop,
   saveAndRestoreNavigationPosition,
-  setupSidebar,
-  setupSidebarItemEventListeners
+  setupSidebar
 } from "./page_navigation";
 
 import { enableDocSearch } from "./search";
@@ -30,5 +29,4 @@ document.addEventListener("DOMContentLoaded", function(event) {
   enableScrollToTop();
   saveAndRestoreNavigationPosition();
   setupSidebar();
-  setupSidebarItemEventListeners();
 });
diff --git a/frontend/javascript/page_navigation.js b/frontend/javascript/page_navigation.js
@@ -16,18 +16,24 @@ export function enableScrollToTop() {
   });
 }
 
-export function setupSidebarItemEventListeners() {
-  const sidebarItems = document.querySelectorAll('.sidebar-item-h2');
+export function setupSidebar() {
+  const h1Elements = document.querySelectorAll('h1');
+  const h2Elements = document.querySelectorAll('article h2');
+  const sidebar = document.querySelector('.sidebar');
 
-  sidebarItems.forEach(function(item) {
-    item.addEventListener('mouseenter', function() {
-      item.style.color = '#34d399';
-    });
-    item.addEventListener('mouseleave', function() {
-      item.style.color = 'gray';
-    });
-    item.addEventListener('click', function() {
-      const currentVersion = item.textContent;
+  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') {
+      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 currentVersion = newItem.textContent;
       const headings = document.querySelectorAll('h2');
       let targetElement = null;
       headings.forEach(function(heading) {
@@ -39,47 +45,14 @@ export function setupSidebarItemEventListeners() {
         window.scrollTo(0, targetElement.offsetTop - 100);
       }
     });
-  });
-}
-
-export function setupSidebar() {
-  const h1Elements = document.querySelectorAll('h1');
-  const h2Elements = document.querySelectorAll('h2');
-  const sidebar = document.querySelector('.sidebar');
-
-  sidebar.style.position = 'fixed';
-  sidebar.style.top = '100px';
-  sidebar.style.right = '50px';
-  sidebar.style.width = 'fit-content';
-  sidebar.style.maxWidth = '300px';
-  sidebar.style.height = '100%';
-
-  function appendSidebarItem(textContent, tagName) {
-    const newItem = document.createElement('p');
-    newItem.textContent = textContent;
-    if (tagName === 'h1') {
-      newItem.classList.add('sidebar-item');
-      newItem.classList.add('text-green-500'); 
-    }
-    if (tagName === 'h2') {
-      newItem.classList.add('sidebar-item-h2');
-      newItem.classList.add('text-gray-500'); 
-      newItem.style.marginLeft = '20px';
-      newItem.style.cursor = 'pointer';
-    }
-    sidebar.appendChild(newItem);
   }
 
   h1Elements.forEach(function (element) {
     appendSidebarItem(element.textContent, 'h1');
   });
 
-  let categories = 0;
   h2Elements.forEach(function (element) {
-    if (categories > 4) {
-      appendSidebarItem(element.textContent, 'h2');
-    }
-    categories++;
+    appendSidebarItem(element.textContent, 'h2');
   });
 }
 

diff --git a/src/_layouts/default.erb b/src/_layouts/default.erb
@@ -33,8 +33,7 @@
               </div>
             </article>
           </main>
-          <div class="hidden sidebar text-xs p-4 2xl:flex flex-col">
-          </div>
+          <div class="hidden sidebar text-xs p-4 2xl:flex flex-col fixed top-24 right-12 w-fit max-w-72 h-full"></div>
           <%= render "footer", locals: { metadata: site.metadata } %>
         </div>
       </div>