<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    leaf: {
      type: Boolean,
      default: true
    }
  },
  render (h, context) {
    const { icon, title } = context.props
    const vnodes = []
    const iconClass = 'iconsize ' + icon
    if (icon) {
      vnodes.push(<i class={iconClass}/>)
    } else {
      vnodes.push(<i class='iconsize iconfont icon-menu-home-normal'/>)
    }
    if (title) {
      vnodes.push(<span class='iconmargin' slot='title'>{(title)}</span>)
    }
    return vnodes
  }
}
</script>

<style scoped>
  .iconsize {
    font-size: 22px;
  }

  .iconmargin {
    margin-left: 5px;
  }
</style>
