studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix expandedNav shift on mobile

Browse source
This commit is contained in:
isUnknown 2024-09-20 09:16:45 +02:00
parent 7cf792ed15
commit dbfd54f1a1
3 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/nav.css
View file

@ -52,8 +52,6 @@
grid-template-columns: 2fr 8fr 1fr;
padding: 3rem var(--space-m) 3rem 1rem;
border-bottom: var(--border);
transition: top 0.6s var(--curve-quick-slow);
}
#expanded-nav.open {
top: 0rem;

20
assets/js/functions.js
View file

@ -1,24 +1,30 @@
let handleClick;
function expandNav(nodes) {
nodes.expandedNav.classList.add("open");
nodes.expandedNav.style = "transition: top 0.6s var(--curve-quick-slow);";
setTimeout(() => {
nodes.expandedNav.classList.add("open");
nodes.burgerBtn.setAttribute("aria-expanded", true);
nodes.closeNavBtn.setAttribute("aria-expanded", true);
nodes.burgerBtn.setAttribute("aria-expanded", true);
nodes.closeNavBtn.setAttribute("aria-expanded", true);
handleClick = () => closeNav(nodes);
nodes.main.addEventListener("click", handleClick);
nodes.footer.addEventListener("click", handleClick);
handleClick = () => closeNav(nodes);
nodes.main.addEventListener("click", handleClick);
nodes.footer.addEventListener("click", handleClick);
}, 10);
}
function closeNav(nodes) {
console.log("close nav");
nodes.expandedNav.classList.remove("open");
nodes.burgerBtn.removeAttribute("aria-expanded");
nodes.closeNavBtn.removeAttribute("aria-expanded");
nodes.main.removeEventListener("click", handleClick);
setTimeout(() => {
nodes.expandedNav.removeAttribute("style");
}, 610);
}
function show(image) {

3
assets/js/script.js
View file

@ -26,13 +26,10 @@ document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
nodes.images.forEach((image) => {
console.log(image);
console.log(image.complete);
if (image.complete) {
show(image);
} else {
image.addEventListener("load", () => {
console.log("image loaded");
show(image);
});
}