37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
import { expandNav, closeNav } from "./functions.js";
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Variables
|
|
const nodes = {
|
|
burgerBtn: document.querySelector(".burger-btn"),
|
|
closeNavBtn: document.querySelector(".expanded-nav .close-btn"),
|
|
expandedNav: document.querySelector(".expanded-nav"),
|
|
main: document.querySelector("main"),
|
|
footer: document.querySelector(".main-footer"),
|
|
nav: document.querySelector(".main-nav"),
|
|
};
|
|
|
|
// Listeners
|
|
nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
|
|
nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
|
|
|
|
// Key shortcuts
|
|
window.addEventListener("keyup", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeNav(nodes);
|
|
}
|
|
});
|
|
window.addEventListener("scroll", (event) => {
|
|
if (nodes.expandedNav.classList.contains("open")) {
|
|
closeNav(nodes);
|
|
}
|
|
if (
|
|
window.scrollY > 100 &&
|
|
!nodes.nav.classList.contains("main-nav--small")
|
|
) {
|
|
nodes.nav.classList.add("main-nav--small");
|
|
} else if (window.scrollY < 100) {
|
|
nodes.nav.classList.remove("main-nav--small");
|
|
}
|
|
});
|
|
});
|