From f04758c9714e70538bc9968cab3d5708bfa148bd Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Fri, 4 Aug 2023 22:00:39 -0400
Subject: [PATCH] Generate navigation items using the `nav` plugin

The `nav_icon` page data specifies which icon will be displayed in
the nav entry.
---
 _components/navbar.tsx | 33 ++++++++++++++-------------------
 gpg-key.md             |  1 +
 resume.md              |  1 +
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/_components/navbar.tsx b/_components/navbar.tsx
index d3186b6..9609560 100644
--- a/_components/navbar.tsx
+++ b/_components/navbar.tsx
@@ -1,4 +1,6 @@
-export default function() {
+export default function({ nav }) {
+  const defaultIcon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/question-mark.svg";
+
   const iconStyle = {
     filter: "var(--filter-blue)",
   };
@@ -15,24 +17,17 @@ export default function() {
             />
           </a>
         </li>
-        <li className="navbar-list-item">
-          <a href="/gpg-key" title="GPG Key">
-            <img
-              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg"
-              className="icon"
-              style={iconStyle}
-            />
-          </a>
-        </li>
-        <li className="navbar-list-item">
-          <a href="/resume" title="Resume">
-            <img
-              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg"
-              className="icon"
-              style={iconStyle}
-            />
-          </a>
-        </li>
+        {nav.menu().children.map(navItem => (
+          <li className="navbar-list-item">
+            <a href={`/${navItem.slug}`} title={navItem.data.title}>
+              <img
+                src={navItem.data.nav_icon || defaultIcon}
+                className="icon"
+                style={iconStyle}
+              />
+            </a>
+          </li>
+        ))}
       </ul>
     </nav>
   );
diff --git a/gpg-key.md b/gpg-key.md
index b8c594c..d2ea1b0 100644
--- a/gpg-key.md
+++ b/gpg-key.md
@@ -1,6 +1,7 @@
 ---
 title: GPG Key
 description: Information about my public GPG key and how to obtain it.
+nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg
 ---
 
 > I do not use keyservers. This is the only place where I provide my public key. A key claiming to be mine somewhere else is definitely a fake.
diff --git a/resume.md b/resume.md
index 66690ab..16785b7 100644
--- a/resume.md
+++ b/resume.md
@@ -1,6 +1,7 @@
 ---
 title: Resume
 description: My experience, skills, education, etc.
+nav_icon: https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg
 ---
 
 ## Experience