<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    if (icon) {
      // vnodes.push(<div><svg-icon style='height:1.5em;width:1.5em' icon-class={icon}/></div>)
      vnodes.push(<div class='top'><svg-icon class='icon-width' icon-class={icon}/></div>)
    }
    if (title) {
      if (title.length > 5) {
          vnodes.push(<div class='bottom'><span title={(title)}>{(title)}</span></div>)
      } else {
        vnodes.push(<div class='bottom'><span>{(title)}</span></div>)
      }
    }
    return vnodes
  }
}
</script>
