Allows user to customize navigation links

src/App.vue

@@ -31,6 +31,7 @@ export default {
         return {
           title: pageInfo.title || defaults.title,
           description: pageInfo.description || defaults.description,
+          navLinks: pageInfo.navLinks || defaults.navLinks,
         };
       }
       return defaults;

src/components/PageStrcture/Header.vue

@@ -1,7 +1,7 @@
 <template>
     <header>
-      <PageTitle :title="pageInfo.title" :description="pageInfo.description" v-if="titleVisible" />
-      <Nav class="nav" v-if="navVisible" />
+      <PageTitle v-if="titleVisible"  :title="pageInfo.title" :description="pageInfo.description" />
+      <Nav v-if="navVisible" :links="pageInfo.navLinks" class="nav" />
     </header>
 </template>
 

src/components/PageStrcture/Nav.vue

@@ -1,14 +1,26 @@
 <template>
     <nav id="nav">
-        <router-link to="/" class="nav-item">Home</router-link>
-        <router-link to="/about" class="nav-item">About</router-link>
+        <router-link
+            v-for="(link, index) in links"
+            :key="index"
+            :to="link.path"
+            :href="link.path"
+            :target="isUrl(link.path) ? '_blank' : ''"
+            rel="noopener noreferrer"
+            class="nav-item"
+        >{{link.title}}</router-link>
     </nav>
-
 </template>
 
 <script>
 export default {
   name: 'Nav',
+  props: {
+    links: Array,
+  },
+  methods: {
+    isUrl: (str) => new RegExp(/(http|https):\/\/(\S+)(:[0-9]+)?/).test(str),
+  },
 };
 </script>
 

src/utils/defaults.js

@@ -2,6 +2,10 @@ module.exports = {
   pageInfo: {
     title: 'Dashy',
     description: '',
+    navLinks: [
+      { title: 'Home', path: '/' },
+      { title: 'Source', path: 'https://github.com/Lissy93/dashy' },
+    ],
   },
   appConfig: {},
   iconSize: 'medium',