サイドメニューをコンポーネント化しよう

s-yoshiii · Jul 13, 2022 · 4afb785 · 4afb785
1 parent 0b92d06
commit 4afb785
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,7 +4,6 @@
       <!-- <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> -->
     </nav>
-    <SideBar />
     <router-view />
   </div>
 </template>
@@ -19,11 +18,10 @@
 }
 
 nav {
-  padding: 30px;
-
   a {
     font-weight: bold;
     color: #2c3e50;
+    text-align: left;
 
     &.router-link-exact-active {
       color: #42b983;
@@ -42,10 +40,7 @@ nav {
 }
 </style>
 <script>
-import SideBar from "@/components/layouts/SideBar";
 export default {
-  components: {
-    SideBar,
-  },
+  components: {},
 };
 </script>
diff --git a/src/views/ChatBoard.vue b/src/views/ChatBoard.vue
@@ -1,5 +1,6 @@
 <template>
   <v-app id="inspire">
+    <SideBar />
     <v-main>
       <v-container class="py-8 px-6" fluid>
         <v-row>
@@ -49,7 +50,11 @@
 
 <script>
 import firebase from "@/firebase/firebase";
+import SideBar from "@/components/layouts/SideBar";
 export default {
+  components: {
+    SideBar,
+  },
   async created() {
     this.user_id = this.$route.query.user_id;
     const chatRef = firebase.firestore().collection("chats");

diff --git a/src/views/UserList.vue b/src/views/UserList.vue
@@ -1,5 +1,6 @@
 <template>
   <v-app id="inspire">
+    <SideBar />
     <v-app-bar app shrink-on-scroll>
       <v-toolbar-title>ユーザー一覧</v-toolbar-title>
       <v-spacer></v-spacer>
@@ -23,7 +24,10 @@
 </template>
 
 <script>
+import SideBar from "@/components/layouts/SideBar";
 export default {
-  //
+  components: {
+    SideBar,
+  },
 };
 </script>