사이드메뉴 추가

pages/index.vue

@@ -2,7 +2,7 @@
   <div class="md-layout md-aligment-center" style="margin: 4em 0">
     <!-- TOP Navigation-->
     <md-toolbar class="fixed-toolbar" elevation="1">
-      <md-button class="md-icon-button">
+      <md-button @click="showLeftSidepanel = true" class="md-icon-button">
         <md-icon>menu</md-icon>
       </md-button>
       <nuxt-link class="md-primary md-title" to="/">
@@ -11,11 +11,30 @@
       <div class="md-toolbar-section-end">
         <md-button @click="$router.push('/login')">Login</md-button>
         <md-button @click="$router.push('/register')">Register</md-button>
-        <md-button class="md-accent" @click="showSidepanel = true">Categorises</md-button>
+        <md-button class="md-accent" @click="showRightSidepanel = true">Categorises</md-button>
       </div>
     </md-toolbar>
 
-    <md-drawer class="md-right" md-fixed :md-active.sync="showSidepanel">
+    <md-drawer md-fixed :md-active.sync="showLeftSidepanel">
+      <md-toolbar :md-elevation="1">
+        <span class="md-title">Personal Feed</span>
+      </md-toolbar>
+
+      <md-progress-bar v-if="loading" md-mode="indeterminate" />
+
+      <md-field>
+        <label for="country">Country</label>
+        <md-select @input="changeCountry" :value="country" name="country" id="country">
+          <md-option value="us">United States</md-option>
+          <md-option value="ca">Canada</md-option>
+          <md-option value="kr">Koread</md-option>
+          <md-option value="ru">Russia</md-option>
+          <md-option value="fr">France</md-option>
+        </md-select>
+      </md-field>
+    </md-drawer>
+
+    <md-drawer class="md-right" md-fixed :md-active.sync="showRightSidepanel">
       <md-toolbar :md-elevation="1">
         <span class="md-title">News Categories</span>
       </md-toolbar>
@@ -91,7 +110,8 @@ export default {
   //   return { headlines: topHeadlines.articles }
   // }
   data: () => ({
-    showSidepanel: false,
+    showRightSidepanel: false,
+    showLeftSidepanel: false,
     newsCategories: [
       { name: 'Top Headlines', path: '', icon: 'today' },
       { name: 'Technology', path: 'technology', icon: 'keyboard' },
@@ -111,15 +131,26 @@ export default {
     },
     loading () {
       return this.$store.getters.loading
+    },
+    country () {
+      return this.$store.getters.country
+    }
+  },
+  watch: {
+    async country () {
+      await this.$store.dispatch('loadHeadLines', `/api/top-headlines?country=${this.country}&category=${this.category}`)
     }
   },
   async fetch ({ store }) {
-    await store.dispatch('loadHeadLines', `/api/top-headlines?country=us&category=${store.state.category}`)
+    await store.dispatch('loadHeadLines', `/api/top-headlines?country=${store.state.country}&category=${store.state.category}`)
   },
   methods: {
     async loadCategory (category) {
       this.$store.commit('setCategory', category)
-      await this.$store.dispatch('loadHeadLines', `/api/top-headlines?country=us&category=${this.category}`)
+      await this.$store.dispatch('loadHeadLines', `/api/top-headlines?country=${this.country}&category=${this.category}`)
+    },
+    changeCountry (country) {
+      this.$store.commit('setCountry', country)
     }
   }
 }

store/index.js

@@ -5,7 +5,8 @@ const createStore = () => {
     state: {
       headlines: [],
       loading: false,
-      category: ''
+      category: '',
+      country: 'us'
     },
     mutations: {
       setHeadLines (state, headlines) {
@@ -16,6 +17,9 @@ const createStore = () => {
       },
       setCategory (state, category) {
         state.category = category
+      },
+      setCountry (state, country) {
+        state.country = country
       }
     },
     actions: {
@@ -29,7 +33,8 @@ const createStore = () => {
     getters: {
       headlines: state => state.headlines,
       loading: state => state.loading,
-      category: state => state.category
+      category: state => state.category,
+      country: state => state.country
     }
   })
 }