From 10c8f3557b6cc5ae00653890d7a268ba2744a057 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Tue, 14 Aug 2018 17:29:50 +0800
Subject: [PATCH] feat: add mobile side menu

---
 src/components/layout/GlobalLayout.vue | 27 ++++++++++++-
 src/components/menu/menu.js            |  5 ++-
 src/components/tool/Drawer.vue         | 56 ++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/components/tool/Drawer.vue

diff --git a/src/components/layout/GlobalLayout.vue b/src/components/layout/GlobalLayout.vue
index 24d59e5..e6f0512 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/components/layout/GlobalLayout.vue
@@ -1,6 +1,17 @@
 <template>
   <a-layout>
-    <a-layout-sider class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
+    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
+      <a-layout-sider class="sider" width="256px" :trigger="null">
+        <div class="logo">
+          <a href="/">
+            <img src="static/img/vue-antd-logo.png">
+            <h1>Vue Ant Pro</h1>
+          </a>
+        </div>
+        <i-menu :collapsed="true" :menuData="menuData" @select="onMenuSelect"/>
+      </a-layout-sider>
+    </drawer>
+    <a-layout-sider v-else class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
       <div class="logo">
         <a href="/">
           <img src="static/img/vue-antd-logo.png">
@@ -27,6 +38,7 @@ import GlobalHeader from './GlobalHeader'
 import AIcon from 'ant-design-vue/es/icon/icon'
 import IMenu from '../menu/menu'
 import GlobalFooter from './GlobalFooter'
+import Drawer from '../tool/Drawer'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
@@ -39,6 +51,7 @@ let menuData = []
 export default {
   name: 'GlobalLayout',
   components: {
+    Drawer,
     GlobalFooter,
     AIcon,
     GlobalHeader,
@@ -55,9 +68,21 @@ export default {
       menuData: menuData
     }
   },
+  computed: {
+    isMobile () {
+      return this.$store.state.setting.isMobile
+    }
+  },
   methods: {
     toggleCollapse () {
       this.collapsed = !this.collapsed
+    },
+    onDrawerChange (show) {
+      console.log(show)
+      this.collapsed = show
+    },
+    onMenuSelect (obj) {
+      this.toggleCollapse()
     }
   },
   beforeCreate () {
diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
index 0eb3d43..03e6461 100644
--- a/src/components/menu/menu.js
+++ b/src/components/menu/menu.js
@@ -164,7 +164,10 @@ export default {
         },
         on: {
           openChange: this.onOpenChange,
-          select: (obj) => { this.selectedKeys = obj.selectedKeys }
+          select: (obj) => {
+            this.selectedKeys = obj.selectedKeys
+            this.$emit('select', obj)
+          }
         }
       }, this.renderMenu(h, this.menuData)
     )
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
new file mode 100644
index 0000000..b7d3e02
--- /dev/null
+++ b/src/components/tool/Drawer.vue
@@ -0,0 +1,56 @@
+<template>
+  <div >
+    <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
+    <div :class="['drawer', openDrawer ? 'open' : 'close']">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Drawer',
+  props: ['openDrawer'],
+  methods: {
+    open () {
+      this.$emit('change', true)
+    },
+    close () {
+      this.$emit('change', false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .mask{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    transition: all 0.5s;
+    z-index: 100;
+    &.open{
+      display: inline-block;
+    }
+    &.close{
+      display: none;
+    }
+  }
+  .drawer{
+    position: fixed;
+    width: 256px;
+    height: 100%;
+    transition: all 0.5s;
+    z-index: 100;
+    &.open{
+      left: 0px;
+    }
+    &.close{
+      left: -262px;
+    }
+    .sider{
+      height: 100%;
+    }
+  }
+</style>