<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    badge: Number
  },
  render(h, context) {
    const { icon, title, badge } = context.props
    const vnodes = []

    if (icon) {
      vnodes.push(<svg-icon icon-class={icon} test="1"/>)
    }

    if (title) {
      vnodes.push(<span><span>{(title)}</span><span class="badge">{badge}</span></span>)
    }

    return vnodes
  }
}
</script>
<style lang="scss" scoped>
.badge:not(:empty){
  background: red;
  color: #fff;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 10px;
  margin-left: 5px;
}
</style>