Create new <v-app-bar/> extension component.

Intended to be used in the v-slot:extension slot of <v-app-bar/>.
This commit is contained in:
D. Berge
2023-10-28 13:22:58 +02:00
parent 9a2fdeab0e
commit 28beef81de

View File

@@ -0,0 +1,48 @@
<template>
<v-tabs :value="tab" show-arrows>
<v-tab v-for="tab, index in tabs" :key="index" link :to="tabLink(tab.href)" v-text="tab.text"></v-tab>
</v-tabs>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'DougalAppBarExtensionProject',
data() {
return {
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" }
]
};
},
computed: {
page () {
return this.$route.path.split(/\/+/)[3];
},
tab () {
return this.tabs.findIndex(t => t.href == this.page);
},
},
methods: {
tabLink (href) {
return `/projects/${this.$route.params.project}/${href}`;
}
}
}
</script>