From 9f2e25278b458d0b64f2aca9ed053a5749a686c3 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Sat, 28 Oct 2023 13:26:57 +0200
Subject: [PATCH] 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.
---
 .../source/src/components/navigation.vue      | 33 +++++--------------
 1 file changed, 8 insertions(+), 25 deletions(-)

diff --git a/lib/www/client/source/src/components/navigation.vue b/lib/www/client/source/src/components/navigation.vue
index 2e0fdd8..cab76e1 100644
--- a/lib/www/client/source/src/components/navigation.vue
+++ b/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')">
-      <v-tabs :value="tab" show-arrows align-with-title>
-        <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-slot:extension v-if="appBarExtension">
+      <div :is="appBarExtension"></div>
     </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