Header partial

assets/js/baseof.js

@@ -1,4 +1,4 @@
-function getInitialTheme() {
+function initTheme() {
   const persistedColorPreference = window.localStorage.getItem('theme');
   const hasPersistedPreference = typeof persistedColorPreference === 'string';
 
@@ -16,7 +16,7 @@ function getInitialTheme() {
   return 'light';
 }
 
-function updateTheme(theme) {
+function loadTheme() {
   root.style.setProperty('--theme', theme);
   root.style.setProperty(
     '--background',
@@ -28,6 +28,12 @@ function updateTheme(theme) {
       ? 'var(--header-light-background)'
       : 'var(--header-dark-background)'
   );
+  root.style.setProperty(
+    '--nav-background',
+    theme === 'light'
+      ? 'var(--nav-light-background)'
+      : 'var(--nav-dark-background)'
+  );
   root.style.setProperty(
     '--header-shadow',
     theme === 'light' ? 'var(--shadow)' : 'none'
@@ -38,20 +44,24 @@ function updateTheme(theme) {
   fetch(`../icons/${theme === 'light' ? 'sun' : 'moon'}.svg`)
     .then((response) => response.text())
     .then((svg) => {
-      document.querySelector('#theme-toggle').innerHTML = svg;
+      themeTogglers.forEach(themeToggler => {
+        themeToggler.innerHTML = svg;
+      });
     })
-    .catch(() => {})
+    .catch(() => {});
+}
+
+function updateTheme() {
+  theme = theme === 'light' ? 'dark' : 'light';
+  window.localStorage.setItem('theme', theme);
+  loadTheme();
 }
 
 const root = document.documentElement;
-let theme = getInitialTheme();
+const themeTogglers = document.querySelectorAll('.theme-toggler');
 
-document.addEventListener('DOMContentLoaded', () => {
-  updateTheme(theme);
-});
+let theme = initTheme();
 
-document.querySelector('#theme-toggle').addEventListener('click', () => {
-  theme = theme === 'light' ? 'dark' : 'light';
-  window.localStorage.setItem('theme', theme);
-  updateTheme(theme);
-});
+document.addEventListener('DOMContentLoaded', loadTheme);
+
+themeTogglers.forEach(themerToggler => themerToggler.addEventListener('click', updateTheme));

assets/js/partials/header.js

@@ -0,0 +1,57 @@
+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(() => {});
+}
+
+function updateBurger() {
+  burgerOpen = !burgerOpen;
+  loadBurger();
+}
+
+function resetBurger() {
+  burgerOpen = false;
+  loadBurger();
+}
+
+function resetBurgerWhenWindowResized() {
+  if (window.innerWidth > 768) {
+    resetBurger();
+  }
+}
+
+function resetBurgerWhenClickedOutside(event) {
+  if (
+    mobileNavigation.style.display === 'flex' &&
+    event.target !== header &&
+    event.target !== mobileNavigation &&
+    !mobileNavigation.contains(event.target)
+  ) {
+    resetBurger();
+  }
+}
+
+const burgerPlaceholder = document.querySelector('#burger');
+const header = document.querySelector('header');
+const mobileNavigation = document.querySelector('nav');
+let burgerOpen = false;
+
+window.addEventListener('resize', resetBurgerWhenWindowResized);
+
+document.addEventListener('DOMContentLoaded', loadBurger);
+
+document.addEventListener('click', resetBurgerWhenClickedOutside);
+
+burgerPlaceholder.addEventListener('click', updateBurger);