Header partial

assets/css/baseof.css

@@ -53,6 +53,11 @@ body {
   isolation: isolate;
 }
 
+main {
+  width: 85%;
+  margin: auto;
+}
+
 img,
 picture,
 video,
@@ -88,3 +93,8 @@ a {
   height: 24px;
   opacity: .25;
 }
+
+hr {
+  color: var(--text);
+  opacity: .25;
+}

assets/css/partials/header.css

@@ -1,26 +1,35 @@
 :root {
   --header-light-background: var(--white);
   --header-dark-background: #676666;
+  --nav-light-background: var(--white);
+  --nav-dark-background: #121212;
+}
+
+header, nav {
+  width: 85%;
+  border-radius: 0.75rem;
+  text-transform: uppercase;
 }
 
 header {
-  width: 85%;
   margin: 2.5rem auto;
   padding: 0.938rem 2.188rem;
 
-  border-radius: 0.75rem;
-  box-shadow: var(--header-shadow);
-
   background-color: var(--header-background);
   color: var(--text);
 
-  text-transform: uppercase;
-
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+nav {
+  background-color: var(--nav-background);
+  display: none;
+  position: fixed;
+  flex-direction: column;
+}
+
 header #header-face {
   display: flex;
   align-items: center;
@@ -31,16 +40,29 @@ header #header-face h3 {
   font-weight: 600;
 }
 
+header #menus a, nav #menus a {
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 15px;
+}
+
 header #menus {
   display: flex;
   align-items: center;
   column-gap: 1.563rem;
 }
 
-header #menus a {
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 15px;
+nav #menus {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: center;
+  row-gap: 3.125rem;
+}
+
+nav hr {
+  margin-top: 3.125rem;
+  margin-bottom: 1.25rem;
 }
 
 header #links {
@@ -49,17 +71,27 @@ header #links {
   column-gap: 1.5rem;
 }
 
-header #links .linkedin,
-header #links .github,
-header #links .cv-paper-flip,
-header #burger svg path {
+nav #links {
+  display: flex;
+  justify-content: end;
+  column-gap: 1.5rem;
+}
+
+nav #links .theme-toggler {
+  margin-right: auto;
+}
+
+#links .linkedin,
+#links .github,
+#links .cv-paper-flip,
+#burger svg path {
   stroke: var(--text);
 }
 
-header #links .twitter,
-header #links .rss,
-header #links .cv,
-header #links .moon {
+#links .twitter,
+#links .rss,
+#links .cv,
+#links .moon {
   fill: var(--text);
 }
 
@@ -67,12 +99,12 @@ header #burger {
   display: none;
 }
 
-header #links #theme-toggle, header #burger {
+.theme-toggler, #burger {
   cursor: pointer;
 }
 
 @media only screen and (max-width: 768px) {
-  header {
+  header, nav {
     padding: 0.938rem 1.25rem;
   }
 

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);