62 lines
2.2 KiB
JavaScript
62 lines
2.2 KiB
JavaScript
// sidenav transition-burger
|
|
|
|
var sidenav = document.querySelector("aside");
|
|
var sidenav_trigger = document.querySelector("[sidenav-trigger]");
|
|
var sidenav_close_button = document.querySelector("[sidenav-close-btn]");
|
|
var sidenav_burger = sidenav_trigger.firstElementChild;
|
|
var top_bread = sidenav_burger.firstElementChild;
|
|
var bottom_bread = sidenav_burger.lastElementChild;
|
|
|
|
sidenav_trigger.addEventListener("click", function () {
|
|
|
|
if (pageName != "rtl-page") {
|
|
if (sidenav_trigger.getAttribute("aria-expanded") == "false") {
|
|
sidenav_trigger.setAttribute("aria-expanded", "true");
|
|
sidenav.classList.add("translate-x-0");
|
|
sidenav.classList.remove("-translate-x-full");
|
|
sidenav.classList.add("shadow-soft-xl");
|
|
|
|
top_bread.classList.add("translate-x-[5px]");
|
|
bottom_bread.classList.add("translate-x-[5px]");
|
|
} else {
|
|
sidenav_trigger.setAttribute("aria-expanded", "false");
|
|
sidenav.classList.remove("translate-x-0");
|
|
sidenav.classList.add("-translate-x-full");
|
|
sidenav.classList.remove("shadow-soft-xl");
|
|
|
|
top_bread.classList.remove("translate-x-[5px]");
|
|
bottom_bread.classList.remove("translate-x-[5px]");
|
|
}
|
|
} else {
|
|
if (sidenav_trigger.getAttribute("aria-expanded") == "false") {
|
|
sidenav_trigger.setAttribute("aria-expanded", "true");
|
|
sidenav.classList.add("translate-x-0");
|
|
sidenav.classList.remove("translate-x-full");
|
|
sidenav.classList.add("shadow-soft-xl");
|
|
|
|
top_bread.classList.add("-translate-x-[5px]");
|
|
bottom_bread.classList.add("-translate-x-[5px]");
|
|
} else {
|
|
sidenav_trigger.setAttribute("aria-expanded", "false");
|
|
sidenav.classList.remove("translate-x-0");
|
|
sidenav.classList.add("translate-x-full");
|
|
sidenav.classList.remove("shadow-soft-xl");
|
|
|
|
top_bread.classList.remove("-translate-x-[5px]");
|
|
bottom_bread.classList.remove("-translate-x-[5px]");
|
|
}
|
|
}
|
|
});
|
|
|
|
sidenav_close_button.addEventListener("click", function () {
|
|
sidenav_trigger.click();
|
|
});
|
|
|
|
window.addEventListener("click", function (e) {
|
|
if (!sidenav.contains(e.target) && !sidenav_trigger.contains(e.target)) {
|
|
if (sidenav_trigger.getAttribute("aria-expanded") == "true") {
|
|
sidenav_trigger.click();
|
|
}
|
|
}
|
|
});
|