hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

No fetching of icons

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/baseof.js
+15 -9
View File
@@ -41,14 +41,18 @@ function loadTheme() {
root.style.setProperty('--text', theme === 'light' ? 'black' : 'white');
root.style.setProperty('--color', theme === 'light' ? 'black' : 'white');
fetch(`/icons/${theme === 'light' ? 'sun' : 'moon'}.svg`)
.then((response) => response.text())
.then((svg) => {
themeTogglers.forEach(themeToggler => {
themeToggler.innerHTML = svg;
});
})
.catch(() => {});
document.querySelector(
theme === 'light' ? 'header .moon' : 'header .sun'
).style.display = 'none';
document.querySelector(
theme === 'light' ? 'nav .moon' : 'nav .sun'
).style.display = 'none';
document.querySelector(
theme === 'light' ? 'header .sun' : 'header .moon'
).style.display = 'block';
document.querySelector(
theme === 'light' ? 'nav .sun' : 'nav .moon'
).style.display = 'block';
}
function updateTheme() {
@@ -64,4 +68,6 @@ let theme = initTheme();
document.addEventListener('DOMContentLoaded', loadTheme);
themeTogglers.forEach(themerToggler => themerToggler.addEventListener('click', updateTheme));
themeTogglers.forEach((themerToggler) =>
themerToggler.addEventListener('click', updateTheme)
);
assets/js/partials/header.js
+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);