From 1b8c9b45bc8df33958e52db266fdbb70f077df2a Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Sat, 23 May 2020 23:18:28 +0300
Subject: [PATCH] dashboard: add custom page titles for documentation and
 dashboard

---
 dashboard/src/components/Title.vue            | 13 +++++++++++++
 dashboard/src/components/dashboard/Layout.vue | 11 ++++++++---
 dashboard/src/components/docs/DocsLayout.vue  |  5 ++++-
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 dashboard/src/components/Title.vue

diff --git a/dashboard/src/components/Title.vue b/dashboard/src/components/Title.vue
new file mode 100644
index 00000000..2c740c52
--- /dev/null
+++ b/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>
diff --git a/dashboard/src/components/dashboard/Layout.vue b/dashboard/src/components/dashboard/Layout.vue
index f450305e..081c4b4d 100644
--- a/dashboard/src/components/dashboard/Layout.vue
+++ b/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");
diff --git a/dashboard/src/components/docs/DocsLayout.vue b/dashboard/src/components/docs/DocsLayout.vue
index 2309ceaa..dcf71315 100644
--- a/dashboard/src/components/docs/DocsLayout.vue
+++ b/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");
     },