separate external links

README.md

@@ -152,6 +152,13 @@ export default {
                   path: { name: "reception"},
                   iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
                 },
+                {
+                  type: "link",
+                  text: "GitHub",
+                  path: "https://github.com/",
+                  isUsingLink: true,
+                  linkTarget: "_blank",
+                },
               ]
             },
             {

src/components/DesktopMenuItemButton.vue

@@ -5,6 +5,8 @@
     :class="['vnb__menu-options__option__button', 'vnb-button', option.class]"
     :aria-label="option.text"
     :isLinkAction="option.isLinkAction ? true : false"
+    :isUsingLink="option.isUsingLink"
+    :linkTarget="option.linkTarget"
     @click="$emit('vnb-item-clicked', option.text)"
   >
     <template #content>

src/components/DesktopMenuItemLink.vue

@@ -7,6 +7,8 @@
     :aria-label="option.text"
     tabindex="0"
     :isLinkAction="option.isLinkAction ? true : false"
+    :isUsingLink="option.isUsingLink"
+    :linkTarget="option.linkTarget"
     @click="$emit('vnb-item-clicked', option.text)"
   >
     <template #content>

src/components/DynamicLink.vue

@@ -1,8 +1,8 @@
 <template>
-  <router-link v-if="isUsingVueRouter && path" v-bind="$attrs" :to="localPath">
+  <router-link v-if="isUsingVueRouter && path && !isUsingLink" v-bind="$attrs" :to="localPath">
     <slot name="content"></slot>
   </router-link>
-  <a v-if="!isUsingVueRouter && !isLinkAction && path" v-bind="$attrs" :href="path">
+  <a v-if="!isUsingVueRouter && !isLinkAction && path" v-bind="$attrs" :href="path" :target="linkTarget">
     <slot name="content"></slot>
   </a>
   <a v-if="isLinkAction" v-bind="$attrs" href="javascript:void(0);">
@@ -26,6 +26,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    isUsingLink: {
+      type: Boolean,
+      default: false,
+    },
+    linkTarget: {
+      type: String,
+      default: "_self",
+    }
   },
   computed: {
     localPath() {

src/vue-navigation-bar.vue

@@ -31,7 +31,7 @@
 
 <script>
 import {VueScreenSizeMixin} from 'vue-screen-size';
-import uuidV4 from './common/uuidv4';
+import uuidV4 from './common/uuidV4';
 import BrandImage from './components/BrandImage.vue';
 import CollapseButton from './components/CollapseButton.vue';
 import MenuOptions from './components/MenuOptions.vue';