<template>
  <hive-menu
    :active.sync="active"
    mode="vertical"
    :collapsable="true"
    :collapseIcon="collapseIcon"
    @select="handleSelect">
    <hive-menu-item index="1" icon="cart"><template slot="title">cart</template></hive-menu-item>
    <hive-menu-item index="2" icon="chat"><template slot="title">chat</template></hive-menu-item>
    <hive-submenu index="3" icon="app">
      <template slot="title">app</template>
      <template slot="child">
        <hive-menu-item index="3-1"><template slot="title">android</template></hive-menu-item>
        <hive-menu-item index="3-2"><template slot="title">apple</template></hive-menu-item>
      </template>
    </hive-submenu>
    <hive-submenu index="4" icon="attach">
      <template slot="title">attach</template>
      <template slot="child">
        <hive-submenu index="4-1">
          <template slot="title">attach_son</template>
          <template slot="child">
            <hive-menu-item index="4-1-1"><template slot="title">attach_son_0</template></hive-menu-item>
          </template>
        </hive-submenu>
        <hive-menu-item index="4-2"><template slot="title">Option 1</template></hive-menu-item>
      </template>
    </hive-submenu>
  </hive-menu>
</template>

<script>
  export default {
    data() {
      return {
        active: '',
        collapseIcon: {
          logo: 'data:image/png;base64,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',
          icon: 'file_paste',
        },
      };
    },
    methods: {
      handleSelect(tab) {
        console.log(tab);
      },
    },
  };
</script>
