Do tabs in a way consistent with a baseurl (i.e. absolute page refs)

Author: hategan

web/_includes/menu.html

@@ -1,10 +1,10 @@
         <v-app-bar elevation="4" height="48pt" fixed elevate-on-scroll width="100%">
             <v-tabs v-model="maintabs">
-                <v-tab href="index.html" key="index"><div class="psij-font logo">PSI/J</div></v-tab>
-                <v-tab href="install.html" key="install">Install</v-tab>
-                <v-tab href="docs" key="docs">Documentation</v-tab>
-                <v-tab href="resources.html" key="resources">Resources</v-tab>
-                <v-tab href="about.html" key="about">About</v-tab>
+                <v-tab key="index"><a href="{{site.baseurl}}/index.html"><div class="psij-font logo">PSI/J</div></a></v-tab>
+                <v-tab key="install"><a href="{{site.baseurl}}/install.html">Install</a></v-tab>
+                <v-tab key="docs"><a href="{{site.baseurl}}/docs">Documentation</a></v-tab>
+                <v-tab key="resources"><a href="{{site.baseurl}}/resources.html">Resources</a></v-tab>
+                <v-tab key="about"><a href="{{site.baseurl}}/about.html">About</a></v-tab>
             </v-tabs>
 
             <div class="slack-link navbar-link">

web/_includes/vueinit.html

@@ -4,7 +4,7 @@
             el: '#psij-app',
             vuetify: new Vuetify(),
             data: {
-                maintabs: "{{ page.tab }}"
+                maintabs: {{ page.tab }}
             }
         });
 

web/about.html

@@ -1,7 +1,7 @@
 ---
 title: About - PSI/J - Python
 layout: default
-tab: about.html
+tab: 4
 ---
 
 

web/index.html

@@ -1,7 +1,7 @@
 ---
 title: PSI/J - Python
 layout: default
-tab: index.html
+tab: 0
 ---
 
                 <div id="main-banner">

web/install.html

@@ -1,7 +1,7 @@
 ---
 title: Install - PSI/J - Python
 layout: default
-tab: install.html
+tab: 1
 ---
 
                 <v-row class="page-start">

web/resources.html

@@ -1,7 +1,7 @@
 ---
 title: Resources - PSI/J - Python
 layout: default
-tab: resources.html
+tab: 3
 ---
 
                 <v-row class="page-start">

web/style.css

@@ -27,7 +27,7 @@ body .v-application a {
     background-color: var(--color-bg-inv-1) !important;
 }
 
-.v-app-bar .v-tab {
+.v-app-bar .v-tab, .v-app-bar .v-tab a {
     color: var(--color-fg-inv-1) !important;
 }