dashboard: add custom page titles for documentation and dashboard

dashboard/src/components/Title.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export default {
+    props: ['title'],
+    watch: {
+      title: {
+        immediate: true,
+        handler() {
+          document.title = this.title;
+        },
+      },
+    },
+  };
+</script>

dashboard/src/components/dashboard/Layout.vue

@@ -1,5 +1,7 @@
 <template>
-	<div class="dashboard container mx-auto px-4 py-2">
+  <div class="dashboard container mx-auto px-4 py-2">
+    <Title title="Zeppelin - Dashboard" />
+
     <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
       <div class="flex-initial flex items-center">
         <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
@@ -27,7 +29,7 @@
     <div class="main-content">
       <router-view></router-view>
     </div>
-	</div>
+  </div>
 </template>
 
 <style scoped>
@@ -43,9 +45,12 @@
 </style>
 
 <script>
-  // import "../../style/dashboard.scss";
+  import Title from "../Title.vue";
 
   export default {
+    components: {
+      Title,
+    },
     methods: {
       async logout() {
         await this.$store.dispatch("auth/logout");

dashboard/src/components/docs/DocsLayout.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="docs container mx-auto px-4 py-2">
+    <Title title="Zeppelin - Documentation" />
+
     <!-- Top bar -->
     <nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
       <div class="flex-initial flex items-center">
@@ -51,6 +53,7 @@
   import Vue from "vue";
   import {mapState} from "vuex";
   import Alert from 'vue-material-design-icons/Alert.vue';
+  import Title from "../Title.vue";
 
   type TMenuItem = {
     to: string;
@@ -117,7 +120,7 @@
   ];
 
   export default {
-    components: { Alert },
+    components: { Alert, Title },
     async mounted() {
       await this.$store.dispatch("docs/loadAllPlugins");
     },