From ecd701555be9fc2d2a41a6d6b66d933c7b6b5dd3 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Sun, 2 Feb 2020 03:26:13 +0700
Subject: [PATCH] More layout update

---
 components/FooterNav.vue    |  4 ++--
 components/Header.vue       | 32 +++++++++++++++++++++-----------
 middleware/title.js         |  6 ++++++
 nuxt.config.js              |  5 ++++-
 pages/about.vue             |  3 +++
 pages/games/arcaea.vue      |  4 +++-
 pages/games/bandori.vue     |  4 +++-
 pages/games/cue.vue         |  4 +++-
 pages/games/index.vue       |  4 +++-
 pages/games/llsif.vue       |  6 ++++--
 pages/games/llsifas.vue     |  4 +++-
 pages/games/maimai.vue      |  4 +++-
 pages/games/mirishita.vue   |  4 +++-
 pages/games/nogikoi.vue     |  4 +++-
 pages/games/sdvx.vue        |  4 +++-
 pages/games/shadowverse.vue |  4 +++-
 pages/games/shinymas.vue    |  4 +++-
 pages/games/starira.vue     |  4 +++-
 pages/games/t7s.vue         |  4 +++-
 pages/games/template.vue    |  4 +++-
 pages/games/unison.vue      |  4 +++-
 pages/index.vue             |  3 +++
 pages/sns.vue               |  3 +++
 store/index.js              | 10 ++++++++++
 24 files changed, 101 insertions(+), 31 deletions(-)
 create mode 100644 middleware/title.js
 create mode 100644 store/index.js

diff --git a/components/FooterNav.vue b/components/FooterNav.vue
index 2c429b1..7c8f7bc 100644
--- a/components/FooterNav.vue
+++ b/components/FooterNav.vue
@@ -6,7 +6,7 @@
     </a>
     <nuxt-link :to="link" v-else>
       <i class="material-icons md-24">{{ icon }}</i>
-      <p class="header-link">{{ text }}</p>
+      <p>{{ text }}</p>
     </nuxt-link>
   </div>
 </template>
@@ -15,7 +15,7 @@ export default {
   props: [ 'link', 'text','external', 'icon' ],
   methods: {
     getCurrentClasses() {
-      if(this.link == this.$nuxt.$route.path) {
+      if(this.$nuxt.$route.path.startsWith(this.link)) {
         return ['footer-nav','selected'];     
       }
       return ['footer-nav'];
diff --git a/components/Header.vue b/components/Header.vue
index b9861a0..a75636b 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,16 +1,13 @@
 <template>
 <div>
   <header>
-      <div class="header-left">
-          <nuxt-link to="/"><p class="header-link">Damillora</p></nuxt-link>
+      <div class="header-left" v-if="needsBackButton">
+          <nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
       </div>
       <div class="header-middle">
+        <p class="text-lg">{{ title }}</p>
       </div>
       <div class="header-right">
-<!--          <nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
-          <nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
-          <nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
-          <a href="//blog.nanao.moe"><p class="header-link">blog</p></a> -->
       </div>
   </header>
 </div>
@@ -18,7 +15,20 @@
 
 <script>
 export default {
-
+  computed: {
+    needsBackButton() {
+      return this.$nuxt.$route.path != "/";
+    },
+    title() {
+      return this.$store.state.title;
+    }
+  },
+  methods: {
+    goBack(event) {
+      if(event) event.preventDefault();
+      this.$router.back();
+    }
+  }
 }
 </script>
 
@@ -27,15 +37,15 @@ header {
     @apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
 }
 .header-link {
-    @apply text-white text-lg mx-2;
+    @apply mx-2 h-6 w-6 cursor-pointer;
 }
 .header-left {
-    
+    @apply flex flex-row justify-start items-center h-full;
 }
 .header-middle {
-    @apply flex-grow;
+    @apply flex-grow flex flex-row justify-start items-center h-full;
 }
 .header-right {
-   @apply flex flex-row;
+   @apply flex flex-row justify-start items-center h-full;
 }
 </style>
diff --git a/middleware/title.js b/middleware/title.js
new file mode 100644
index 0000000..838bf16
--- /dev/null
+++ b/middleware/title.js
@@ -0,0 +1,6 @@
+export default ({ route, store }) => {
+  // Take the last value (latest route child)
+  console.log(route.meta);
+  const title = route.meta.reduce((title, meta) => meta.title || title, 'Damillora')
+  store.commit('SET_TITLE', title)
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 306a889..406e111 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -17,7 +17,7 @@ module.exports = {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
+      { hid: 'description', name: 'description', content: 'Web developer, reviewer and content creator' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
@@ -76,4 +76,7 @@ module.exports = {
   serverMiddleware: [
 
   ],
+  router: {
+    middleware: ['title']
+  },
 }
diff --git a/pages/about.vue b/pages/about.vue
index ebdfe02..6ea671e 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -12,6 +12,9 @@ export default {
   components: {
 
   },
+  meta: {
+    title: 'About Damillora',
+  }
 }
 </script>
 
diff --git a/pages/games/arcaea.vue b/pages/games/arcaea.vue
index 68c1c39..7949c5f 100644
--- a/pages/games/arcaea.vue
+++ b/pages/games/arcaea.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: Arcaea",
+  }
 }
 </script>
 
diff --git a/pages/games/bandori.vue b/pages/games/bandori.vue
index e8be6ea..ba9d09f 100644
--- a/pages/games/bandori.vue
+++ b/pages/games/bandori.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: BanG Dream! Girls Band Party (JP)",
+  },
 }
 </script>
 
diff --git a/pages/games/cue.vue b/pages/games/cue.vue
index 3b797ef..72ca025 100644
--- a/pages/games/cue.vue
+++ b/pages/games/cue.vue
@@ -20,7 +20,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: CUE!",
+  },
 }
 </script>
 
diff --git a/pages/games/index.vue b/pages/games/index.vue
index a781b5d..a456eac 100644
--- a/pages/games/index.vue
+++ b/pages/games/index.vue
@@ -95,7 +95,9 @@ export default {
   components: {
     GameListItem,
   },
-
+  meta: {
+    title: "Game Profile",
+  }
 }
 </script>
 
diff --git a/pages/games/llsif.vue b/pages/games/llsif.vue
index 3a1d2fd..10bdb0f 100644
--- a/pages/games/llsif.vue
+++ b/pages/games/llsif.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-            <h1 class="title">Game Profile: Love Live! School Idol Festival (JP)<</h1>
+            <h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
             <p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
             <h2>My Game ID</h2>
             <p>Player Name: Damillora</p>
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: Love Live! School Idol Festival (JP)",
+  }
 }
 </script>
 
diff --git a/pages/games/llsifas.vue b/pages/games/llsifas.vue
index f49ce32..30c56bf 100644
--- a/pages/games/llsifas.vue
+++ b/pages/games/llsifas.vue
@@ -20,7 +20,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: Love Live! School idol festival ALL STARS",
+  },
 }
 </script>
 
diff --git a/pages/games/maimai.vue b/pages/games/maimai.vue
index 94b84a5..ba8f3ae 100644
--- a/pages/games/maimai.vue
+++ b/pages/games/maimai.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: maimai DX",
+  }
 }
 </script>
 
diff --git a/pages/games/mirishita.vue b/pages/games/mirishita.vue
index 65024e3..2f883a1 100644
--- a/pages/games/mirishita.vue
+++ b/pages/games/mirishita.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: The IDOLM@STER Million Live: Theater Days",
+  },
 }
 </script>
 
diff --git a/pages/games/nogikoi.vue b/pages/games/nogikoi.vue
index 84c5999..01eaad5 100644
--- a/pages/games/nogikoi.vue
+++ b/pages/games/nogikoi.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: Nogikoi",
+  },
 }
 </script>
 
diff --git a/pages/games/sdvx.vue b/pages/games/sdvx.vue
index 356bb7a..a346cd1 100644
--- a/pages/games/sdvx.vue
+++ b/pages/games/sdvx.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: SOUND VOLTEX VIVID WAVE",
+  },
 }
 </script>
 
diff --git a/pages/games/shadowverse.vue b/pages/games/shadowverse.vue
index 7c5fa75..d9f6de5 100644
--- a/pages/games/shadowverse.vue
+++ b/pages/games/shadowverse.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: Shadowverse",
+  }
 }
 </script>
 
diff --git a/pages/games/shinymas.vue b/pages/games/shinymas.vue
index dab5abe..b7c9d58 100644
--- a/pages/games/shinymas.vue
+++ b/pages/games/shinymas.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: THE IDOLM@STER: Shiny Colors",
+  }
 }
 </script>
 
diff --git a/pages/games/starira.vue b/pages/games/starira.vue
index 2a07ad8..7275ed4 100644
--- a/pages/games/starira.vue
+++ b/pages/games/starira.vue
@@ -14,7 +14,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: Revue Starlight Re LIVE (EN)",
+  }
 }
 </script>
 
diff --git a/pages/games/t7s.vue b/pages/games/t7s.vue
index 6f19c5e..bef60bf 100644
--- a/pages/games/t7s.vue
+++ b/pages/games/t7s.vue
@@ -13,7 +13,9 @@ export default {
   components: {
     
   },
-
+  meta: {
+    title: "Game Profile: Tokyo 7th Sisters",
+  },
 }
 </script>
 
diff --git a/pages/games/template.vue b/pages/games/template.vue
index 1c8c5e8..0770377 100644
--- a/pages/games/template.vue
+++ b/pages/games/template.vue
@@ -18,7 +18,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: ",
+  },
 }
 </script>
 
diff --git a/pages/games/unison.vue b/pages/games/unison.vue
index 4b1e695..48c7bf7 100644
--- a/pages/games/unison.vue
+++ b/pages/games/unison.vue
@@ -19,7 +19,9 @@ export default {
   components: {
 
   },
-
+  meta: {
+    title: "Game Profile: 欅坂46・日向坂46 UNI'S ON AIR",
+  },
 }
 </script>
 
diff --git a/pages/index.vue b/pages/index.vue
index 395db4f..11d930f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,6 +18,9 @@ export default {
   components: {
 
   },
+  meta: {
+    title: 'Damillora',
+  }
 }
 </script>
 
diff --git a/pages/sns.vue b/pages/sns.vue
index ed73363..e807c25 100644
--- a/pages/sns.vue
+++ b/pages/sns.vue
@@ -24,6 +24,9 @@ export default {
   components: {
 
   },
+  meta: {
+    title: 'Social Media',
+  }
 }
 </script>
 
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..b655afb
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,10 @@
+
+export const state = () => ({
+  title: 'Damillora'
+})
+
+export const mutations = {
+  SET_TITLE (state, title) {
+    state.title = title
+  }
+}