Mv footer from Home.vue to App.vue

Author: kp54

src/App.vue

@@ -1,28 +1,45 @@
 <template>
   <div id="app">
     <error-page v-if="isError"/>
+
     <header>
       <router-link :to="{ name: 'home' }">
         <img class="logo" src="@/assets/logo.svg" alt="ProLab">
       </router-link>
     <loading-indicator/>
     </header>
+
     <router-view v-show="!isError"/>
+
+    <footer>
+      <div v-if="loggedIn">
+        <router-link to="/editprofile">プロフィール編集</router-link>
+        <router-link :to="{ name: 'editAchievements' }" exact>実績編集</router-link>
+        <Logout/>
+      </div>
+      <div v-else>
+        <router-link to="/login">ログイン</router-link>
+      </div>
+      <small>&copy; Programming Laboratory, 2019</small>
+    </footer>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import ErrorPage from './components/ErrorPage.vue';
 import LoadingIndicator from './components/LoadingIndicator.vue';
+import Logout from '@/components/Logout.vue';
 
 export default {
   components: {
     ErrorPage,
     LoadingIndicator,
+    Logout,
   },
   computed: {
     ...mapGetters('criticalError', ['isError']),
+    ...mapGetters('session', ['loggedIn']),
   },
   metaInfo: {
     title: 'Untitled',
@@ -52,6 +69,25 @@ header img {
   padding: 3px;
 }
 
+footer div {
+  text-align: center;
+}
+
+footer a {
+  display: inline-block;
+  padding: 12px;
+  border-bottom: 2px #333 solid;
+  color: black;
+  margin: 0 4px 24px;
+}
+
+footer small {
+  display: block;
+}
+
+small {
+  text-align: center;
+}
 
 @media screen and (max-width: 480px) {
   header img {

src/views/Home.vue

@@ -21,25 +21,11 @@
         <publicMemberList includeLeftUser/>
       </div>
     </section>
-
-    <footer>
-      <div v-if="loggedIn">
-        <router-link to="/editprofile">プロフィール編集</router-link>
-        <router-link :to="{ name: 'editAchievements' }" exact>実績編集</router-link>
-        <Logout/>
-      </div>
-      <div v-else>
-        <router-link to="/login">ログイン</router-link>
-      </div>
-      <small>&copy; Programming Laboratory, 2019</small>
-    </footer>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import AchievementsList from '@/components/AchievementsList.vue';
-import Logout from '@/components/Logout.vue';
 import publicMemberList from '@/components/PublicMemberList.vue';
 
 export default {
@@ -50,12 +36,8 @@ export default {
   },
   components: {
     AchievementsList,
-    Logout,
     publicMemberList,
   },
-  computed: {
-    ...mapGetters('session', ['loggedIn']),
-  },
 };
 </script>
 
@@ -69,22 +51,6 @@ export default {
   }
 }
 
-footer div {
-  text-align: center;
-}
-
-footer a {
-  display: inline-block;
-  padding: 12px;
-  border-bottom: 2px #333 solid;
-  color: black;
-  margin: 0 4px 24px;
-}
-
-footer small {
-  display: block;
-}
-
 .home {
   max-width: 1500px;
   margin: 40px auto;
@@ -127,10 +93,6 @@ p {
   margin-right: 20px;
 }
 
-small {
-  text-align: center;
-}
-
 @media screen and (max-width: 480px) {
   h2 {
     padding-left: 30px;