feat: add navigation items

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: [],
 };

src/_includes/partials/header.html

@@ -1,5 +1,5 @@
-<header class="navbar">
+<header class="[ navbar ]">
-    <nav class="wrapper flex items-center">
+    <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="" />

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>

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;
+}

src/assets/css/utils/flex.css

@@ -14,3 +14,7 @@
 .justify-center {
   justify-content: center;
 }
+
+.justify-between {
+  justify-content: space-between;
+}