The sidebar-left.js
file is used to manage the scroll-into-view link experience in the navigation/sidebar-left.html
partial layout.
How it Works #
- The script finds the active link via
[data-current="true]
attribute set by logic in thesidebar-left.html
template. - After a 300ms delay, it scrolls until the active link is visible.
Source Code #
document.addEventListener("DOMContentLoaded", function () {
var activeLink = document.querySelector('[data-current="true"]');
// Function to scroll to the link with a delay
function scrollToLink(link) {
if (link) {
setTimeout(function () {
link.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start",
});
}, 300);
}
}
scrollToLink(activeLink);
var links = document.querySelectorAll("a[data-level]");
var currentUrl = window.location.href;
// Function to handle the visibility of nested lists
function handleVisibility() {
// Initially hide all levels greater than 2
links.forEach(function (link) {
var level = parseInt(link.getAttribute("data-level"));
if (level > 1) {
link.closest("li").classList.add("hidden");
}
});
links.forEach(function (link) {
if (link.href === currentUrl) {
link.classList.add("text-brand");
// Unhide all ancestor li elements
var ancestor = link.closest("li");
while (ancestor) {
if (ancestor.tagName.toLowerCase() === "li") {
ancestor.classList.remove("hidden");
}
ancestor = ancestor.parentElement;
}
// Unhide direct siblings at the same level
var parentLi = link.closest("li");
var siblingLis = Array.from(parentLi.parentElement.children).filter(
function (child) {
return child !== parentLi;
}
);
siblingLis.forEach(function (siblingLi) {
siblingLi.classList.remove("hidden");
});
}
});
}
// Call the handleVisibility function
handleVisibility();
});