<template>
   <Submenu :name="menu.id">
      <template slot="title">
         <Icon :type="menu.icon" v-if="menu.icon" />
         <span>{{menu.title}}</span>
      </template>

      <template v-for="(child,i) in menu.menus">
         <side-menu-item v-if="child.menus && child.menus.length" :menu="child"></side-menu-item>

         <menuItem v-else :name="child.id">
            <Icon :type="child.icon" v-if="child.icon" />
            <span>{{child.title}}</span>
         </menuItem>
      </template>
   </Submenu>
</template>

<script>
   export default{
      name: 'sideMenuItem',
      props: {
         menu: {
            type: Object,
            default(){
               return {};
            }
         }
      }
   }
</script>
