<template>
  <div class="demo-menu-bg">
    <hive-menu
      :active.sync="active"
      mode="vertical"
      :collapsable="true"
      @select="handleSelect"
      no-icon
    >
      <template v-slot:header="collapsed">
        <template v-if="collapsed.inline" />
        <template v-else>
          <div class="demo-menu__header">
            Logo
          </div>
        </template>
      </template>
      <hive-menu-item index="1">
        <template>cart</template>
      </hive-menu-item>
      <hive-menu-item index="2">
        <template>chat</template>
      </hive-menu-item>
      <hive-submenu index="3">
        <template slot="title">
          app
        </template>
        <template slot="child">
          <hive-menu-item index="3-1">
            <template>android</template>
          </hive-menu-item>
          <hive-menu-item index="3-2">
            <template>apple</template>
          </hive-menu-item>
        </template>
      </hive-submenu>
      <hive-submenu index="4">
        <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>attach_son_0</template>
              </hive-menu-item>
            </template>
          </hive-submenu>
          <hive-menu-item index="4-2">
            <template>Option 1</template>
          </hive-menu-item>
        </template>
      </hive-submenu>
    </hive-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: '',
      collapseIcon: {
        icon: 'file_paste'
      }
    };
  },
  methods: {
    handleSelect(tab) {
      console.log(tab);
    }
  }
};
</script>
