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

@@ -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>
+        {nav.menu().children.map(navItem => (
           <li className="navbar-list-item">
-          <a href="/gpg-key" title="GPG Key">
+            <a href={`/${navItem.slug}`} title={navItem.data.title}>
               <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"
+                src={navItem.data.nav_icon || defaultIcon}
                 className="icon"
                 style={iconStyle}
               />
             </a>
           </li>
+        ))}
       </ul>
     </nav>
   );

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.

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