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

content/_index.md

@@ -3,5 +3,7 @@ title: "Hazem Krimi"
 date: 2023-10-18T20:03:43+01:00
 ---
 
-*Hi!*
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta magna eu turpis aliquet aliquet. Sed ut laoreet sapien, in fermentum diam. Suspendisse potenti. Integer sit amet felis tincidunt, fermentum risus ut, fringilla quam. In eu lorem ante. Aliquam nunc ligula, iaculis at viverra at, rutrum vitae lorem. Vestibulum sit amet velit nisi. Nullam quis varius lorem. Morbi ac risus ac odio sodales bibendum id sed diam. Fusce sagittis est rhoncus enim rutrum bibendum.
+
+Proin vitae imperdiet tortor. Maecenas non enim tempor, egestas risus eget, malesuada felis. Vestibulum eu eleifend velit. Nullam ut eleifend tortor, sit amet pretium ipsum. In placerat hendrerit quam, quis mollis libero. Morbi rutrum ex nec dictum consectetur. Sed vestibulum blandit placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque rhoncus cursus mi non pulvinar. Aliquam sed suscipit urna.
 

layouts/_default/baseof.html

@@ -15,7 +15,8 @@
       {{ end }}
     </title>
 
-    <script defer src="{{ $scripts.Permalink }}"></script>
+    <script defer src="{{ $scripts.RelPermalink }}"></script>
+    {{ block "scripts" . }}{{ end }}
   </head>
   <body>
     {{ partial "header.html" . }}

layouts/partials/header.html

@@ -5,9 +5,17 @@
   <link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
 {{ end }}
 
+{{ define "scripts" }}
+  {{ $scripts := resources.Get "js/partials/header.js" | js.Build | minify }}
+
+  <script defer src="{{ $scripts.RelPermalink }}"></script>
+{{ end }}
+
 {{ $headerFaceImage := resources.Get "images/header-face.png" }}
 {{ $sun := resources.Get "icons/sun.svg" }}
 {{ $moon := resources.Get "icons/moon.svg" }}
+{{ $burger := resources.Get "icons/burger.svg" }}
+{{ $close := resources.Get "icons/close.svg" }}
 {{ $cv := resources.Get "cv.pdf" }}
 
 <header>
@@ -30,10 +38,37 @@
     <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
     <div class="vertical-separator"></div>
     <span
-      id="theme-toggle"
-      data-moon="{{ $moon.Permalink }}"
-      data-sun="{{ $sun.Permalink }}"
+      class="theme-toggler"
+      data-moon="{{ $moon.RelPermalink }}"
+      data-sun="{{ $sun.RelPermalink }}"
     ></span>
   </div>
-  <span id="burger">{{ readFile "assets/icons/burger.svg" | safeHTML }}</span>
+  <span
+    id="burger"
+    data-burger="{{ $burger.RelPermalink }}"
+    data-close="{{ $close.RelPermalink }}"
+  ></span>
 </header>
+
+<nav>
+  <div id="menus">
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+    <a href="/projects">Projects</a>
+    <a href="/blog">Blog</a>
+    <a href="/contact">Contact</a>
+  </div>
+  <hr>
+  <div id="links">
+    <span
+      class="theme-toggler"
+      data-moon="{{ $moon.RelPermalink }}"
+      data-sun="{{ $sun.RelPermalink }}"
+    ></span>
+    <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
+    <a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
+    <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
+    <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
+    <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
+  </div>
+</nav>