feat: ✨ add responsiveness to navigation

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 {