<template>
  <hn-side-menu
    ref="sideMenu"
    v-bind="$attrs"
    v-on="$listeners"
    :style="{
      width: $attrs.collapse ? null : width,
      boxShadow: boxShadow === 'none' ? null : boxShadow, 
    }">
    <div class="hn-side-menu__header">
      <slot name="header">
      </slot>
    </div>
    <hn-side-menu-tree 
      :menu="menu"
      :text-key="textKey"
      :submenu-key="submenuKey"/>
  </hn-side-menu>
</template>
<script>
import HnSideMenu from './side-menu.vue';
import HnSideMenuTree from './side-menu-tree.vue';

export default {
  name: 'HnSideNav',
  inheritAttrs: false,
  props: {
    menu: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '180px'
    },
    boxShadow: {
      type: String,
      default: '2px 0px 4px rgba(0,0,0,0.12)'
    },
    textKey: {
      type: String,
      default: 'text'
    },
    submenuKey: {
      type: String,
      default: 'submenu'
    }
  },
  components: {
    HnSideMenu,
    HnSideMenuTree
  },
  methods: {
    open(...params) {
      this.$refs.sideMenu.open(...params);
    },
    close(...params) {
      this.$refs.sideMenu.close(...params);
    }
  }
};
</script>
