사이드패널추가

pages/index.vue

@@ -11,8 +11,26 @@
       <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>
       </div>
     </md-toolbar>
+
+    <md-drawer class="md-right" md-fixed :md-active.sync="showSidepanel">
+      <md-toolbar :md-elevation="1">
+        <span class="md-title">News Categories</span>
+      </md-toolbar>
+      <md-progress-bar v-if="loading" md-mode="indeterminate" />
+      <md-list>
+        <md-subheader class="md-primary">Categories</md-subheader>
+        <md-list-item v-for="(newsCategory, i) in newsCategories" :key="i" @click="loadCategory(newsCategory.path)">
+          <md-icon :class="newsCategory.path === category ? 'md-primary' : ''">
+            {{ newsCategory.icon }}
+          </md-icon>
+          <span class="md-list-item-text">{{ newsCategory.name }}</span>
+        </md-list-item>
+      </md-list>
+    </md-drawer>
+
     <!-- App Content -->
     <div class="md-layout-item md-size-95">
       <md-content class="md-layout md-gutter" style="background: #007998; padding: 1em;">
@@ -72,12 +90,36 @@ export default {
   //   const topHeadlines = await app.$axios.$get('/api/top-headlines?country=us')
   //   return { headlines: topHeadlines.articles }
   // }
-  async fetch ({ store }) {
-    await store.dispatch('loadHeadLines', '/api/top-headlines?country=us')
-  },
+  data: () => ({
+    showSidepanel: false,
+    newsCategories: [
+      { name: 'Top Headlines', path: '', icon: 'today' },
+      { name: 'Technology', path: 'technology', icon: 'keyboard' },
+      { name: 'Business', path: 'business', icon: 'business_center' },
+      { name: 'Entertainment', path: 'entertainment', icon: 'weekend' },
+      { name: 'Health', path: 'health', icon: 'fastfood' },
+      { name: 'Scinence', path: 'science', icon: 'fingerprint' },
+      { name: 'Sports', path: 'sports', icon: 'golf_course' }
+    ]
+  }),
   computed: {
     headlines () {
       return this.$store.getters.headlines
+    },
+    category () {
+      return this.$store.getters.category
+    },
+    loading () {
+      return this.$store.getters.loading
+    }
+  },
+  async fetch ({ store }) {
+    await store.dispatch('loadHeadLines', `/api/top-headlines?country=us&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}`)
     }
   }
 }

store/index.js

@@ -3,21 +3,33 @@ import Vuex from 'vuex'
 const createStore = () => {
   return new Vuex.Store({
     state: {
-      headlines: []
+      headlines: [],
+      loading: false,
+      category: ''
     },
     mutations: {
       setHeadLines (state, headlines) {
         state.headlines = headlines
+      },
+      setLoading (state, loading) {
+        state.loading = loading
+      },
+      setCategory (state, category) {
+        state.category = category
       }
     },
     actions: {
       async loadHeadLines ({ commit }, apiUrl) {
+        commit('setLoading', true)
         const { articles } = await this.$axios.$get(apiUrl)
+        commit('setLoading', false)
         commit('setHeadLines', articles)
       }
     },
     getters: {
-      headlines: state => state.headlines
+      headlines: state => state.headlines,
+      loading: state => state.loading,
+      category: state => state.category
     }
   })
 }