From 50e66ba905f14769f06cdb500f79b95c7de4316d Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Thu, 30 Jan 2020 13:11:24 +0700
Subject: [PATCH] Update to layouts

---
 assets/css/tailwind.css  |  2 ++
 components/Footer.vue    | 46 ++++++++++++++++++++++++++--------------
 components/FooterNav.vue | 39 ++++++++++++++++++++++++++++++++++
 pages/games.vue          | 19 +++++++++++++++++
 pages/sns.vue            |  2 --
 5 files changed, 90 insertions(+), 18 deletions(-)
 create mode 100644 components/FooterNav.vue

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 385e048..0a49a38 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
 
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
 @import 'tailwindcss/base';
 
 @import 'tailwindcss/components';
diff --git a/components/Footer.vue b/components/Footer.vue
index 73d81ca..577cba0 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,26 +1,38 @@
 <template>
 <div>
   <footer>
-      <div class="footer-nav">
-          <nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
-      </div>
-      <div class="footer-nav">
-          <nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
-      </div>
-      <div class="footer-nav">
-          <nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
-      </div>
-      <div class="footer-nav">
-          <a href="//blog.nanao.moe"><p class="header-link">blog</p></a>
-      </div>
-
+      <FooterNav
+        link="/about"
+        icon="person"
+        text="about"
+         />
+      <FooterNav
+        link="/games"
+        icon="videogame_asset"
+        text="game profile"
+         />
+      <FooterNav
+        link="/sns"
+        icon="contacts"
+        text="social media"
+         />
+      <FooterNav
+        link="//blog.nanao.moe"
+        icon="rss_feed"
+        text="blog"
+        external="true"
+         />
   </footer>
 </div>
 </template>
 
 <script>
-export default {
+import FooterNav from "./FooterNav";
 
+export default {
+  components: {
+    FooterNav
+  },
 }
 </script>
 
@@ -28,7 +40,9 @@ export default {
 footer {
     @apply h-16 w-full flex flex-row justify-start items-center;
 }
-.footer-nav {
-    @apply w-1/4 flex flex-row justify-center items-end;
+@screen md {
+  .footer-nav p {
+      @apply text-base;
+  }
 }
 </style>
diff --git a/components/FooterNav.vue b/components/FooterNav.vue
new file mode 100644
index 0000000..2c429b1
--- /dev/null
+++ b/components/FooterNav.vue
@@ -0,0 +1,39 @@
+<template>
+  <div :class="getCurrentClasses()">
+    <a :href="link" v-if="external">
+      <i class="material-icons md-24">{{ icon }}</i>
+      <p class="header-link">{{ text }}</p>
+    </a>
+    <nuxt-link :to="link" v-else>
+      <i class="material-icons md-24">{{ icon }}</i>
+      <p class="header-link">{{ text }}</p>
+    </nuxt-link>
+  </div>
+</template>
+<script>
+export default {
+  props: [ 'link', 'text','external', 'icon' ],
+  methods: {
+    getCurrentClasses() {
+      if(this.link == this.$nuxt.$route.path) {
+        return ['footer-nav','selected'];     
+      }
+      return ['footer-nav'];
+    }
+  },
+}
+</script>
+<style>
+.footer-nav {
+    @apply w-1/4 transition-bg;
+}
+.footer-nav a {
+    @apply w-full h-full flex flex-col justify-end items-center py-2;
+}
+.footer-nav p {
+    @apply text-xs;
+}
+.footer-nav.selected {
+    background-color: rgba(0,0,0,0.5);
+}
+</style>
diff --git a/pages/games.vue b/pages/games.vue
index f01640d..0d701ea 100644
--- a/pages/games.vue
+++ b/pages/games.vue
@@ -8,59 +8,78 @@
                 <ul>
                     <li>
                         <p><a href="https://p.eagate.573.jp/game/sdvx/v/">SOUND VOLTEX VIVID WAVE</a></p>
+                        <p>Player Name: YUIKA283</p>
                         <p>ID: SV-6457-6694</p>
                     </li>
+                    <li>
+                        <p><a href="https://maimai.sega.com">maimai DX</a></p>
+                        <p>Player Name: YUIKA283</p>
+                        <p>ID: 6027059823123</p>
+                    </li>
                     <li>
                         <p><a href="https://millionlive.idolmaster.jp/theaterdays/">THE IDOLM@STER Million Live: Theater Days</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: CGTEDUQ4</p>
                     </li>
                     <li>
                         <p><a href="https://arcaea.lowiro.com">Arcaea</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 264202217</p>
                     </li>
                     <li>
                         <p><a href="http://t7s.jp">Tokyo 7th Sisters</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: M2mXkWk</p>
                     </li>
                     <li>
                         <p><a href="https://bang-dream.bushimo.jp/">BanG Dream! Girls Band Party (JP)</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 106205253</p>
                     </li>
                     <li>
                         <p><a href="https://lovelive-sif.bushimo.jp/">Love Live! School Idol Festival (JP)</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 755897396</p>
                     </li>
                     <li>
                         <p><a href="https://www.en.revuestarlight-relive.com/">Revue Starlight Re LIVE (EN)</a></p>
+                        <p>Player Name: [RS]Damillora</p>
                         <p>ID: 2490812618</p>
                     </li>
                     <li>
                         <p><a href="https://shadowverse.com/">Shadowverse</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 778908673</p>
                     </li>
                     <li>
                         <p><a href="https://nogikoi.jp/">Nogikoi</a></p>
+                        <p>Player Name: -</p>
                         <p>ID: 1673068678</p>
                     </li>
                     <li>
                         <p><a href="https://shinycolors.idolmaster.jp">THE IDOLM@STER: Shiny Colors</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: ePmtJyTwzn</p>
                     </li>
                     <li>
                         <p><a href="https://keyahina-unisonair.com/">UNI'S ON AIR</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: y2medy4d</p>
                     </li>
                     <li>
                         <p><a href="https://www.cue-liber.jp/">CUE!</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 37132287893</p>
                     </li>
                     <li>
                         <p><a href="https://lovelive-as.bushimo.jp/">Love Live ! School idol festival ALL STARS</a></p>
+                        <p>Player Name: -</p>
                         <p>ID: (soon)</p>
                     </li>
                     <!--
                     <li>
                         <p><a href=""></a></p>
+                        <p>Player Name: </p>
                         <p>ID: </p>
                     </li>
                     -->
diff --git a/pages/sns.vue b/pages/sns.vue
index b223fa6..ed73363 100644
--- a/pages/sns.vue
+++ b/pages/sns.vue
@@ -7,12 +7,10 @@
                 <li>
                   <p>YouTube:</p>
                   <p><a href="/channel">Damillora</a></p>
-                  <p><a href="/ArchivesOfAYurikoP">Archives of a YurikoP</a></p>
                 </li>
                 <li>
                   <p>Twitter:</p>
                   <p><a href="/twitter">Damillora</a></p>
-                  <p><a href="/twittermitsumine">mitsumine_dmi</a></p>
                 </li>
               </ul>
             </p>