feat(MaterialAside): implement aside collapse state switch

Author: lbwa

src/App.vue

@@ -52,7 +52,6 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
 }
 #nav {

src/layout/Material/Aside.vue

@@ -1,19 +1,23 @@
 <template>
   <el-aside
     class="layout__material__aside"
-    width="254px"
+    :width="$store.state.isAsideCollapse ? `254px` : `80px`"
   >
     material aside
   </el-aside>
 </template>
 
 <script>
 export default {
-  data () {
-    return {}
-  }
 }
 </script>
 
 <style lang='scss' scoped>
+@import '~STYLE/color/background.scss';
+
+.layout__material__aside {
+  min-height: 100vh;
+  background-color: $background-dark;
+  transition: width .3s;
+}
 </style>

src/layout/Material/Header.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-header class="layout__material__header">
+    <i
+      class="el-icon-menu header__icon"
+      @click="toggleAside"
+    ></i>
+    <el-button
+      class="logout"
+      type="text"
+      @click="onLogout"
+    >Logout</el-button>
+    <el-button
+      class="logout"
+      type="text"
+      @click="$router.push('/pages/admin/dashboard')"
+    >dashboard</el-button>
+    <el-button
+      class="logout"
+      type="text"
+      @click="$router.push('/pages/admin/table')"
+    >table</el-button>
+    <el-button
+      class="logout"
+      type="text"
+      @click="$router.push('/pages/common/user')"
+    >user info</el-button>
+  </el-header>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  methods: {
+    onLogout () {
+      this.$store.dispatch('login/userLogout')
+        .then(() => this.$router.replace('/login'))
+    },
+    ...mapMutations({
+      toggleAside: 'SET_ASIDE_COLLAPSE'
+    })
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+@import '~STYLE/color/background.scss';
+
+.layout__material__header {
+  padding: 0 24px 0 0;
+  position: relative; // for box-shadow
+  background-color: $background-lightest;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .header {
+    &__icon {
+      padding: 0 24px;
+      line-height: 60px;
+      cursor: pointer;
+      font-size: 20px;
+      transition: all .3s, padding 0s;
+    }
+  }
+}
+</style>

src/layout/Material/index.vue

@@ -4,28 +4,7 @@
     <material-aside/>
 
     <el-container class="layout__material__placeholder">
-      <el-header>
-        <el-button
-          class="logout"
-          type="text"
-          @click="onLogout"
-        >Logout</el-button>
-        <el-button
-          class="logout"
-          type="text"
-          @click="$router.push('/pages/admin/dashboard')"
-        >dashboard</el-button>
-        <el-button
-          class="logout"
-          type="text"
-          @click="$router.push('/pages/admin/table')"
-        >table</el-button>
-        <el-button
-          class="logout"
-          type="text"
-          @click="$router.push('/pages/common/user')"
-        >user info</el-button>
-      </el-header>
+      <material-header/>
 
       <el-main class="layout__material__placeholder-main">
         <router-view/>
@@ -39,23 +18,18 @@
 </template>
 
 <script>
+import MaterialHeader from './Header'
 import MaterialAside from './Aside'
 
 export default {
-  methods: {
-    onLogout () {
-      this.$store.dispatch('login/userLogout')
-        .then(() => this.$router.replace('/login'))
-    }
-  },
-
   computed: {
     currentYear () {
       return new Date().getFullYear()
     }
   },
 
   components: {
+    MaterialHeader,
     MaterialAside
   }
 }
@@ -75,6 +49,7 @@ export default {
 
   &__footer {
     line-height: 60px;
+    text-align: center;
   }
 }
 </style>

src/store/mutations/index.js

@@ -1,3 +1,7 @@
-// import types from './types'
+import types from './types'
 
-export default {}
+export default {
+  [types.SET_ASIDE_COLLAPSE] (state) {
+    state.isAsideCollapse = !state.isAsideCollapse
+  }
+}

src/store/mutations/types.js

@@ -1 +1,3 @@
-export default {}
+export default {
+  SET_ASIDE_COLLAPSE: 'SET_ASIDE_COLLAPSE'
+}

src/store/state.js

@@ -1 +1,3 @@
-export default {}
+export default {
+  isAsideCollapse: false
+}