From cbc41e74baf24e07ac8570f7f6a4312ccac2d159 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 10 Apr 2025 16:04:13 +0200
Subject: [PATCH] feat: :sparkles: add responsiveness to navigation

---
 src/components/icon.webc         |  12 ++++
 src/components/navigation.webc   | 112 +++++++++++++++++++++++++------
 src/components/page-content.webc |   2 +
 3 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/src/components/icon.webc b/src/components/icon.webc
index bc016f3..d70d35f 100644
--- a/src/components/icon.webc
+++ b/src/components/icon.webc
@@ -310,6 +310,18 @@
   />
 </svg>
 
+<svg
+  webc:elseif="icon === 'bars'"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+>
+  <!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
+  <path
+    d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"
+  />
+</svg>
+
 <style>
   svg {
     width: 100%;
diff --git a/src/components/navigation.webc b/src/components/navigation.webc
index b4c1fa7..0807a40 100644
--- a/src/components/navigation.webc
+++ b/src/components/navigation.webc
@@ -1,6 +1,11 @@
-<nav
-  :aria-label="label"
-  @html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
+<nav :aria-label="label">
+  <label for="nav-toggle">
+    <icon icon="bars" webc:nokeep></icon>
+  </label>
+  <input type="checkbox" id="nav-toggle" />
+  <template
+    webc:nokeep
+    @html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
     listClass: 'list',
     listItemClass: 'item',
     listItemHasChildrenClass: 'hasChildren',
@@ -13,42 +18,109 @@
 
     showExcerpt: false
   })"
-></nav>
+  ></template>
+</nav>
 
 <style>
   nav {
     --nav-spacing: 1em;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: end;
-    font-size: 0.75em;
+    --nav-background-color: var(--clr-nav-background);
+    --nav-border: var(--border-thin) solid var(--clr-box-border);
 
-    @media (min-width: 30em) {
+    position: sticky;
+    top: 0;
+
+    display: grid;
+    justify-items: end;
+
+    background-color: var(--nav-background-color);
+
+    border-block-end: var(--nav-border);
+
+    z-index: 2;
+
+    @media (min-width: 35em) {
       --nav-spacing: 1.5em;
-      font-size: 0.875em;
+      --nav-background-color: transparent;
+      --nav-border: none;
     }
 
     @media (min-width: 64em) {
       --nav-spacing: 2em;
-      font-size: 1em;
+    }
+
+    &:has(input:checked) {
+      & ul {
+        opacity: 1;
+      }
+
+      & li {
+        height: 100%;
+      }
+    }
+
+    & label {
+      width: 1.5em;
+      height: 1.5em;
+      margin-block: 0.75em;
+      margin-inline: 1em;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      @media (min-width: 35em) {
+        display: none;
+      }
+    }
+
+    & input {
+      display: none;
     }
 
     & ul {
-      flex: 0 0 0;
+      --nav-items-position: absolute;
+      --nav-items-orientation: column nowrap;
+
+      position: var(--nav-items-position);
+      top: 3em;
+
       display: flex;
-      flex-flow: row nowrap;
-      gap: var(--nav-spacing);
+      flex-flow: var(--nav-items-orientation);
 
-      width: fit-content;
-
-      background-color: var(--clr-nav-background);
+      text-align: end;
       list-style: none;
 
+      background-color: var(--clr-nav-background);
+
       margin: 0;
-      border-inline-start: var(--border-thin) solid var(--clr-box-border);
-      border-block-end: var(--border-thin) solid var(--clr-box-border);
-      border-radius: 0 0.75em;
+      border: var(--border-thin) solid var(--clr-box-border);
+      border-block-start: none;
+      border-inline-end: none;
+      border-end-start-radius: 0.75em;
       padding-inline: var(--nav-spacing);
+
+      z-index: 3;
+      opacity: 0;
+      transition: opacity 0.4s ease-in-out;
+
+      @media (min-width: 35em) {
+        --nav-items-position: static;
+        --nav-items-orientation: row nowrap;
+        align-items: start;
+        gap: 1em;
+        opacity: 1;
+      }
+    }
+
+    & li {
+      overflow: hidden;
+      height: 0;
+      transition: height 0.4s ease-in-out;
+
+      @media (min-width:35em) {
+        height: 100%;
+      }
     }
 
     & .link {
diff --git a/src/components/page-content.webc b/src/components/page-content.webc
index d6995c1..8c0ed41 100644
--- a/src/components/page-content.webc
+++ b/src/components/page-content.webc
@@ -12,6 +12,8 @@
     border: var(--border-thin) solid var(--clr-box-border);
     border-radius: var(--border-radius);
 
+    overflow: clip;
+
     & :where(h1, h2, h3, h4, h5, h6) {
       --heading-spacing: 0.25em;
       position: relative;