Replace hard-coded navigation bar with dynamic alternative.

Navigation bars should be coded as their own component and
added to the meta section of the Vue Router's route(s) in which
they are to be used.

lib/www/client/source/src/components/navigation.vue

@@ -71,17 +71,10 @@
 
         </v-menu>
 
-        <!--
-        <v-btn small text class="ml-2" title="Log out" link to="/?logout=1">
-          <v-icon small>mdi-logout</v-icon>
-        </v-btn>
-        -->
       </template>
     </template>
-    <template v-slot:extension v-if="$route.matched.find(i => i.name == 'Project')">
+    <template v-slot:extension v-if="appBarExtension">
-      <v-tabs :value="tab" show-arrows align-with-title>
+      <div :is="appBarExtension"></div>
-        <v-tab v-for="tab, index in tabs" :key="index" link :to="tabLink(tab.href)" v-text="tab.text"></v-tab>
-      </v-tabs>
     </template>
   </v-app-bar>
 
@@ -95,24 +88,17 @@ export default {
   data() {
     return {
       drawer: false,
-      tabs: [
-        { href: "summary", text: "Summary" },
-        { href: "lines", text: "Lines" },
-        { href: "plan", text: "Plan" },
-        { href: "sequences", text: "Sequences" },
-        { href: "calendar", text: "Calendar" },
-        { href: "log", text: "Log" },
-        { href: "qc", text: "QC" },
-        { href: "graphs", text: "Graphs" },
-        { href: "map", text: "Map" }
-      ],
       path: []
     };
   },
 
   computed: {
-    tab () {
+
-      return this.tabs.findIndex(t => t.href == this.$route.path.split(/\/+/)[3]);
+    appBarExtension () {
+      return this.$route.matched
+        .filter(i => i.meta?.appBarExtension)
+        .map(i => i.meta.appBarExtension)
+        .pop()?.component;
     },
 
     ...mapGetters(['user', 'loading'])
@@ -131,9 +117,6 @@ export default {
   },
 
   methods: {
-    tabLink (href) {
-      return `/projects/${this.$route.params.project}/${href}`;
-    },
 
     breadcrumbs () {
       this.path = this.$route.matched