FIX: Navigation links are proper links

frontend/src/components/Navigation.vue

@@ -4,22 +4,37 @@
       <div v-for="link in group" :key="key + link.label + link.address">
         <template v-if="!('visible' in link) || link.visible()">
           <div v-if="!$store.state.show_sidebar_left && !fullwidth" class="link-button-wrapper">
-            <button class="link-button" :id="'sidenavbar-link-button-' + key + link.label"
-                    :class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}"
-                    @click.stop="navigate(link.address)">
-              <span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
-            </button>
+            <router-link :to="link.address" v-if="!link.address.startsWith('https:/')">
+              <button class="link-button" :id="'sidenavbar-link-button-' + key + link.label"
+                      :class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}">
+                <span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
+              </button>
+            </router-link>
+            <a :href="link.address" target="_blank" v-else>
+              <button class="link-button" :id="'sidenavbar-link-button-' + key + link.label"
+                      :class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}">
+                <span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
+              </button>
+            </a>
             <b-popover :target="'sidenavbar-link-button-' + key + link.label" class="popover-wide" triggers="hover"
                        placement="right" container="sideNavbar"
                        :content="link.label" boundary="window" custom-class="popover-wide"/>
           </div>
           <div v-if="$store.state.show_sidebar_left || fullwidth" class="link-button-wrapper">
-            <button class="link-button"
-                    :class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}"
-                    @click.stop="navigate(link.address)">
-              <span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
-              {{ link.label }}
-            </button>
+            <router-link :to="link.address" v-if="!link.address.startsWith('https:/')">
+              <button class="link-button"
+                      :class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}">
+                <span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
+                {{ link.label }}
+              </button>
+            </router-link>
+            <a :href="link.address" target="_blank" v-else>
+              <button class="link-button"
+                      :class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}">
+                <span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
+                {{ link.label }}
+              </button>
+            </a>
           </div>
         </template>
       </div>
@@ -130,15 +145,6 @@ export default {
       },
       fullwidth: true
     }
-  },
-  methods: {
-    navigate(to) {
-      if (to.startsWith('https://')) {
-        window.open(to, '_blank').focus()
-        return
-      }
-      if (this.$route.path !== to) this.$router.push(to)
-    }
   }
 }
 </script>