2020-03-31 02:16:08 +08:00
|
|
|
(function () {
|
|
|
|
"use strict";
|
|
|
|
const navToggle = document.getElementById("header-nav-toggle");
|
|
|
|
const mainNav = document.getElementById("header-nav");
|
2020-03-24 11:20:28 +08:00
|
|
|
|
|
|
|
if (navToggle) {
|
|
|
|
// Open menu
|
2020-03-31 02:16:08 +08:00
|
|
|
navToggle.addEventListener("click", function () {
|
|
|
|
document.body.classList.toggle("off-nav-is-active");
|
|
|
|
mainNav.classList.toggle("is-active");
|
2020-03-24 11:20:28 +08:00
|
|
|
if (mainNav.style.maxHeight) {
|
2020-03-31 02:16:08 +08:00
|
|
|
mainNav.style.maxHeight = null;
|
2020-03-24 11:20:28 +08:00
|
|
|
} else {
|
2020-03-31 02:16:08 +08:00
|
|
|
mainNav.style.maxHeight = mainNav.scrollHeight + "px";
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
2020-03-31 02:16:08 +08:00
|
|
|
this.getAttribute("aria-expanded") === "true"
|
|
|
|
? this.setAttribute("aria-expanded", "false")
|
|
|
|
: this.setAttribute("aria-expanded", "true");
|
|
|
|
});
|
2020-03-24 11:20:28 +08:00
|
|
|
// Close menu
|
2020-03-31 02:16:08 +08:00
|
|
|
document.addEventListener("click", function (e) {
|
|
|
|
if (
|
|
|
|
e.target !== mainNav &&
|
|
|
|
e.target !== navToggle &&
|
|
|
|
!mainNav.contains(e.target)
|
|
|
|
) {
|
|
|
|
document.body.classList.remove("off-nav-is-active");
|
|
|
|
mainNav.classList.remove("is-active");
|
|
|
|
mainNav.style.maxHeight = null;
|
|
|
|
navToggle.setAttribute("aria-expanded", "false");
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
2020-03-31 02:16:08 +08:00
|
|
|
});
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
2020-03-31 02:16:08 +08:00
|
|
|
})();
|