<template>
  <div
    class="ui-navmenu-group"
    :class="['ui-navmenu-group--' + type]"
  >
    <div v-if="label" class="ui-navmenu-group__title">{{ label }}</div>
    <div class="ui-navmenu-group__content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'UiNavmenuGroup',
  inject: ['UiNavmenu'],
  props: {
    label: {
      type: String,
      default: ''
    }
  },
  computed: {
    type() {
      return this.UiNavmenu.type
    }
  }
}
</script>
<style lang="less">
.ui-navmenu-group:not(:last-child) {
  margin-bottom: 24px;
}
.ui-navmenu-group--weight:not(:last-child) {
  position: relative;
  &:after{
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -12px;
    border-bottom: 1px solid #DFE4EB;
  }
}
.ui-navmenu-group__title{
  font-size: 16px;
  font-weight: bold;
  height: 32px;
  line-height: 32px;
  padding: 1px 15px;
  margin: 3px 0;
}
</style>
