No fetching of icons

This commit is contained in:
Hazem Krimi
2023-11-04 19:34:08 +01:00
parent c906b26105
commit 254d473e45
8 changed files with 58 additions and 48 deletions
+19 -18
View File
@@ -1,19 +1,19 @@
function loadBurger() {
fetch(`/icons/${burgerOpen ? 'close' : 'burger'}.svg`)
.then((response) => response.text())
.then((svg) => {
burgerPlaceholder.innerHTML = svg;
mobileNavigation.style.display = burgerOpen ? 'flex' : 'none';
mobileNavigation.style.top = burgerOpen
? `calc(${header.getBoundingClientRect().y}px + ${
header.getBoundingClientRect().height
}px + 0.625rem)`
: 'initial';
mobileNavigation.style.left = burgerOpen
? `${header.getBoundingClientRect().x}px`
: 'initial';
})
.catch(() => {});
navToggler.querySelector(
burgerOpen ? '#burger' : '#close'
).style.display = 'none';
navToggler.querySelector(
burgerOpen ? '#close' : '#burger'
).style.display = 'block';
mobileNavigation.style.display = burgerOpen ? 'flex' : 'none';
mobileNavigation.style.top = burgerOpen
? `calc(${header.getBoundingClientRect().y}px + ${
header.getBoundingClientRect().height
}px + 0.625rem)`
: 'initial';
mobileNavigation.style.left = burgerOpen
? `${header.getBoundingClientRect().x}px`
: 'initial';
}
function updateBurger() {
@@ -37,13 +37,14 @@ function resetBurgerWhenClickedOutside(event) {
mobileNavigation.style.display === 'flex' &&
event.target !== header &&
event.target !== mobileNavigation &&
!mobileNavigation.contains(event.target)
!mobileNavigation.contains(event.target) &&
!navToggler.contains(event.target)
) {
resetBurger();
}
}
const burgerPlaceholder = document.querySelector('#burger');
const navToggler = document.querySelector('#nav-toggler');
const header = document.querySelector('header');
const mobileNavigation = document.querySelector('nav');
let burgerOpen = false;
@@ -54,4 +55,4 @@ document.addEventListener('DOMContentLoaded', loadBurger);
document.addEventListener('click', resetBurgerWhenClickedOutside);
burgerPlaceholder.addEventListener('click', updateBurger);
navToggler.addEventListener('click', updateBurger);