From 9dc3ddeec71e4c392203f04a95588636702d736e Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:22:18 -0800
Subject: [PATCH] feat: add navigation items

---
 src/_data/navigation.js                           | 15 ++++++++++++++-
 src/_includes/partials/header.html                |  4 ++--
 src/_includes/partials/menu.html                  |  2 +-
 .../css/blocks/{navbar.css => site-nav.css}       |  5 +++++
 src/assets/css/utils/flex.css                     |  4 ++++
 5 files changed, 26 insertions(+), 4 deletions(-)
 rename src/assets/css/blocks/{navbar.css => site-nav.css} (81%)

diff --git a/src/_data/navigation.js b/src/_data/navigation.js
index 4ecb7fc..f22fe6d 100644
--- a/src/_data/navigation.js
+++ b/src/_data/navigation.js
@@ -1,4 +1,17 @@
 module.exports = {
-  top: [],
+  top: [
+    {
+      text: "About",
+      url: "/about",
+    },
+    {
+      text: "Posts",
+      url: "/posts",
+    },
+    {
+      text: "Catalogue",
+      url: "/catalogue",
+    },
+  ],
   bottom: [],
 };
diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html
index a6bbf10..a2d864a 100644
--- a/src/_includes/partials/header.html
+++ b/src/_includes/partials/header.html
@@ -1,5 +1,5 @@
-<header class="navbar">
-    <nav class="wrapper flex items-center">
+<header class="[ navbar ]">
+    <nav class="[ wrapper flex items-center justify-between ]">
         <div class="[ flex items-center ] [ site-logo ]">
             <a class="[ flex items-center justify-center ] [ logo ]" href="#">
                 <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
diff --git a/src/_includes/partials/menu.html b/src/_includes/partials/menu.html
index 3a42cf2..c951741 100644
--- a/src/_includes/partials/menu.html
+++ b/src/_includes/partials/menu.html
@@ -1,4 +1,4 @@
-<ul>
+<ul class="[ flex ] [ links ]">
     {% for item in navigation.top %}
         <li>
             <a class="nav" href="{{ item.url }}" {{ helpers.getLinkActiveState(item.url, page.url) | safe }}>{{ item.text }}</a>
diff --git a/src/assets/css/blocks/navbar.css b/src/assets/css/blocks/site-nav.css
similarity index 81%
rename from src/assets/css/blocks/navbar.css
rename to src/assets/css/blocks/site-nav.css
index c09a237..fadd49f 100644
--- a/src/assets/css/blocks/navbar.css
+++ b/src/assets/css/blocks/site-nav.css
@@ -7,3 +7,8 @@
   top: 0;
   z-index: 1;
 }
+
+.navbar .links {
+  list-style-type: none;
+  gap: 1.5rem;
+}
diff --git a/src/assets/css/utils/flex.css b/src/assets/css/utils/flex.css
index 700f07e..7808059 100644
--- a/src/assets/css/utils/flex.css
+++ b/src/assets/css/utils/flex.css
@@ -14,3 +14,7 @@
 .justify-center {
   justify-content: center;
 }
+
+.justify-between {
+  justify-content: space-between;
+}