style desktop nav panel
This commit is contained in:
parent
57e9ca74da
commit
81454b3e4e
16 changed files with 157 additions and 136 deletions
|
|
@ -22,36 +22,6 @@ function throttle(callback, limit) {
|
|||
};
|
||||
}
|
||||
|
||||
function toggleTab(data, tab) {
|
||||
if (data.activeTab === tab) {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
setTimeout(() => {
|
||||
data.isOpen = false;
|
||||
data.activeTab = "";
|
||||
}, 500);
|
||||
} else {
|
||||
data.activeTab = tab;
|
||||
data.isOpen = true;
|
||||
scrollToElem(".active-tab");
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToElem(selector) {
|
||||
document.querySelector(".active-tab").scrollTop = 0;
|
||||
setTimeout(() => {
|
||||
const yOffset = -7 * verticalUnit;
|
||||
const elem = document.querySelector(selector);
|
||||
const top = elem.getBoundingClientRect().top;
|
||||
window.scrollTo({
|
||||
top: top + window.scrollY + yOffset,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function setWindowHeightFactor() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const min = 650;
|
||||
|
|
@ -111,7 +81,8 @@ function toggleLogoState() {
|
|||
}
|
||||
}
|
||||
|
||||
function togglePanel(side) {
|
||||
function togglePanel(side, event) {
|
||||
event.stopPropagation();
|
||||
document.querySelector(`.panel--${side}`).classList.toggle("open");
|
||||
const isOpen = document
|
||||
.querySelector(`.panel--${side}`)
|
||||
|
|
@ -120,9 +91,11 @@ function togglePanel(side) {
|
|||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
|
||||
if (isOpen) {
|
||||
document.querySelector("html").style.overflowY = "hidden";
|
||||
document.querySelector("#main-header").classList.remove("minimized");
|
||||
} else {
|
||||
if (window.innerWidth < 640) {
|
||||
document.querySelector("html").style.overflowY = "hidden";
|
||||
document.querySelector("#main-header").classList.remove("minimized");
|
||||
}
|
||||
} else if (window.innerWidth < 640) {
|
||||
document.querySelector("html").style.overflowY = "";
|
||||
if (scrollY > 10) {
|
||||
document.querySelector("#main-header").classList.add("minimized");
|
||||
|
|
@ -130,6 +103,12 @@ function togglePanel(side) {
|
|||
}
|
||||
}
|
||||
|
||||
function closePanels() {
|
||||
document.querySelectorAll(".panel").forEach((panel) => {
|
||||
panel.classList.remove("open");
|
||||
});
|
||||
}
|
||||
|
||||
function fixFootNotes() {
|
||||
const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
|
||||
|
||||
|
|
@ -163,4 +142,18 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
setTimeout(() => {
|
||||
enableToggleEntriesVisibility();
|
||||
}, 100);
|
||||
|
||||
window.addEventListener("click", () => {
|
||||
closePanels();
|
||||
});
|
||||
window.addEventListener("keyup", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
closePanels();
|
||||
}
|
||||
});
|
||||
document.querySelectorAll(".panel").forEach((panel) => {
|
||||
panel.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue