<template lang="html">
  <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'" :z-depth="1">
    <mu-list>
      <mu-list-item v-for="(v, k) in side_menu" :key="k" button>
        <mu-list-item-title>{{ v.title }}</mu-list-item-title>
      </mu-list-item>
      <mu-list-item  @click="close" button>
        <mu-list-item-title>Close</mu-list-item-title>
      </mu-list-item>
    </mu-list>
  </mu-drawer>
</template>

<script>
export default {
  props: ['open'],
  data () {
    return {
      docked: true,
      position: 'left',
      side_menu: [{
        title: 'Menu Item 1'
      }, {
        title: 'Menu Item 2'
      }]
    }
  },
  methods: {
    close () {
      // 关闭侧边栏
      this.open = false;
      $(window).resize()
    }
  }
}
</script>

<style lang="css" scoped>
</style>