blob: 496dfef23ac2868ef3641fb384e814d2c5938688 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
(() => {
const sidebar = document.getElementById("sidebar");
if (!sidebar) {
return;
}
const parent = sidebar.parentElement;
const footer = document.getElementById("footer");
const resizeSidebarWidth = () => {
const rect = parent.getBoundingClientRect();
const style = getComputedStyle(parent);
const width = rect.width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
sidebar.style.width = `${width}px`;
};
const resizeSidebarHeight = () => {
const parentRect = parent.getBoundingClientRect();
const parentStyle = getComputedStyle(parent);
const footerRect = footer.getBoundingClientRect();
const bodyRect = document.body.getBoundingClientRect();
const top = Math.max(parentRect.top + parseFloat(parentStyle.paddingTop), 0);
const bottom = Math.max(bodyRect.height - footerRect.top, 0);
sidebar.style.top = `${top}px`;
sidebar.style.bottom = `${bottom}px`;
}
const handleExpanderClick = (e) => {
e.currentTarget.classList.toggle("expanded");
e.currentTarget.closest("li").querySelector("ul").classList.toggle("is-hidden");
}
const sidebarResizeObserver = new ResizeObserver(resizeSidebarWidth);
sidebarResizeObserver.observe(parent);
window.addEventListener("load", resizeSidebarHeight);
document.addEventListener("scroll", resizeSidebarHeight);
document.querySelectorAll(".expander").forEach(el => el.addEventListener("click", handleExpanderClick));
})();
|
