diff --git a/assets/css/partials/header.css b/assets/css/partials/header.css index bc4d6ae..8b2e02d 100644 --- a/assets/css/partials/header.css +++ b/assets/css/partials/header.css @@ -9,6 +9,7 @@ header, nav { width: 85%; border-radius: 0.75rem; text-transform: uppercase; + color: var(--text); } header { @@ -16,7 +17,6 @@ header { padding: 0.938rem 2.188rem; background-color: var(--header-background); - color: var(--text); display: flex; align-items: center; @@ -84,22 +84,22 @@ nav #links .theme-toggler { #links .linkedin, #links .github, #links .cv-paper-flip, -#burger svg path { +#nav-toggler svg path { stroke: var(--text); } #links .twitter, #links .rss, #links .cv, -#links .moon { +#links .moon > path { fill: var(--text); } -header #burger { +header #nav-toggler { display: none; } -.theme-toggler, #burger { +.theme-toggler, #nav-toggler { cursor: pointer; } @@ -112,7 +112,7 @@ header #burger { display: none; } - header #burger { + header #nav-toggler { display: initial; } } \ No newline at end of file diff --git a/assets/icons/burger.svg b/assets/icons/burger.svg index 0bcaad5..05e4970 100644 --- a/assets/icons/burger.svg +++ b/assets/icons/burger.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/icons/close.svg b/assets/icons/close.svg index 7f0b0b0..b095f1e 100644 --- a/assets/icons/close.svg +++ b/assets/icons/close.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg index c673d7a..160c5f0 100644 --- a/assets/icons/moon.svg +++ b/assets/icons/moon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg index dff001a..bf5036b 100644 --- a/assets/icons/sun.svg +++ b/assets/icons/sun.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/js/baseof.js b/assets/js/baseof.js index 0351ac4..bc05e52 100644 --- a/assets/js/baseof.js +++ b/assets/js/baseof.js @@ -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) +); diff --git a/assets/js/partials/header.js b/assets/js/partials/header.js index 24b80b9..533e92f 100644 --- a/assets/js/partials/header.js +++ b/assets/js/partials/header.js @@ -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); diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c980f0a..95d260a 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -37,15 +37,17 @@
+ > + {{ readFile "assets/icons/moon.svg" | safeHTML }} + {{ readFile "assets/icons/sun.svg" | safeHTML }} + + id="nav-toggler" + > + {{ readFile "assets/icons/burger.svg" | safeHTML }} + {{ readFile "assets/icons/close.svg" | safeHTML }} +