From 4370ad62eefde6a12f7ec2b50ec4f073be2f25a7 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Apr 2025 18:53:34 +0200
Subject: [PATCH] feat: :sparkles: add navigation component

---
 src/components/navigation.webc | 74 ++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/navigation.webc

diff --git a/src/components/navigation.webc b/src/components/navigation.webc
new file mode 100644
index 0000000..b4c1fa7
--- /dev/null
+++ b/src/components/navigation.webc
@@ -0,0 +1,74 @@
+<nav
+  :aria-label="label"
+  @html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
+    listClass: 'list',
+    listItemClass: 'item',
+    listItemHasChildrenClass: 'hasChildren',
+    activeListItemClass: 'item-active',
+
+    anchorClass: 'link',
+    activeAnchorClass: 'link-active',
+
+    activeKey: $data.eleventyNavigation.key,
+
+    showExcerpt: false
+  })"
+></nav>
+
+<style>
+  nav {
+    --nav-spacing: 1em;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: end;
+    font-size: 0.75em;
+
+    @media (min-width: 30em) {
+      --nav-spacing: 1.5em;
+      font-size: 0.875em;
+    }
+
+    @media (min-width: 64em) {
+      --nav-spacing: 2em;
+      font-size: 1em;
+    }
+
+    & ul {
+      flex: 0 0 0;
+      display: flex;
+      flex-flow: row nowrap;
+      gap: var(--nav-spacing);
+
+      width: fit-content;
+
+      background-color: var(--clr-nav-background);
+      list-style: none;
+
+      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;
+      padding-inline: var(--nav-spacing);
+    }
+
+    & .link {
+      display: block;
+
+      font-weight: 500;
+      text-decoration: none;
+      color: var(--clr-nav-link, inherit);
+
+      padding-block: calc(var(--nav-spacing) / 2);
+
+      transition: color 0.4s ease;
+
+      &:hover {
+        color: var(--clr-nav-link-hover, #888);
+      }
+    }
+
+    & .link-active {
+      color: var(--clr-nav-link-active, red);
+    }
+  }
+</style>