Make menu links configurable

config.json

@@ -0,0 +1,41 @@
+{
+    "HeaderItems": [
+        {
+            "text": "Link",
+            "link": "#"
+        },
+        {
+            "text": "Link",
+            "link": "#"
+        },
+        {
+            "text": "Link",
+            "link": "#"
+        }
+    ],
+    "SidebarItems": [
+        {
+            "heading": "Heading"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        },
+        {
+            "text": "Document Title",
+            "link": "#"
+        }
+    ]
+}

src/components/global/Header.astro

@@ -1,11 +1,11 @@
 ---
 // Environment Variables
 import {
-    SITE_NAME,
-    META_COLOR,
-    COLOR,
-    THEME
+    SITE_NAME
 } from '@utils/GetConfig'
+
+// Configuration
+import { HeaderItems } from '../../../config.json'
 ---
 
 <header>
@@ -14,9 +14,9 @@ import {
             <h2><a style="text-decoration: none;" href="/">{SITE_NAME}</a></h2>
         </div>
         <div class="end">
-            <a href="#">Link</a>
-            <a href="#">Social</a>
-            <a href="#">Status</a>
+            {HeaderItems.map((item) => (
+                <a href={item.link}>{item.text}</a>
+            ))}
         </div>
     </div>
 </header>