udpate adjust is mobile

Author: bujidao

src/App.vue

@@ -1,24 +1,12 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <span @click="changeLanguage">
-      <svg-icon icon-class="language"/>
-    </span>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App',
-  methods: {
-    changeLanguage () {
-      const language = this.$store.getters.language
-      const temp = language === 'zh' ? 'en' : 'zh'
-      this.$i18n.locale = temp
-      this.$store.dispatch('app/setLanguage', temp)
-    }
-  }
+  name: 'App'
 }
 </script>
 

src/layout/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="app-wrapper">
+    <img src="@/assets/logo.png">
+    <span @click="changeLanguage">
+      <svg-icon icon-class="language"/>
+    </span>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+export default {
+  name: 'Layout',
+  data () {
+    return {
+      msg: 'hi app'
+    }
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      device: state => state.app.device
+    })
+  },
+  methods: {
+    changeLanguage () {
+      const language = this.$store.getters.language
+      const temp = language === 'zh' ? 'en' : 'zh'
+      this.$i18n.locale = temp
+      this.$store.dispatch('app/setLanguage', temp)
+    }
+  }
+}
+</script>

src/layout/mixin/ResizeHandler.js

@@ -0,0 +1,40 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        // store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.$_isMobile()
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile')
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    $_resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile()
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+      }
+    }
+  }
+}

src/router/index.js

@@ -1,15 +1,21 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/views/index'
+// import HelloWorld from '@/views/index'
+import Layout from '@/layout/index'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      component: Layout,
+      redirect: '/index',
+      children: [{
+        path: 'index',
+        name: 'Home',
+        component: () => import('@/views/index')
+      }]
     }
   ]
 })

src/store/getters.js

@@ -1,4 +1,5 @@
 const getters = {
-  language: state => state.app.language
+  language: state => state.app.language,
+  device: state => state.app.device
 }
 export default getters

src/store/modules/app.js

@@ -2,19 +2,26 @@ import Cookies from 'js-cookie'
 import {getLanguage} from '../../lang'
 
 const state = {
-  language: getLanguage()
+  language: getLanguage(),
+  device: 'desktop'
 }
 
 const mutations = {
   SET_LANGUAGE: (state, language) => {
     state.language = language
     Cookies.set('language', language)
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
   }
 }
 
 const actions = {
   setLanguage ({ commit }, language) {
     commit('SET_LANGUAGE', language)
+  },
+  toggleDevice ({commit}, device) {
+    commit('TOGGLE_DEVICE', device)
   }
 }