<template>
	<nuxt-link :to="link" tag="li" v-if="!hasChild">
		<a>
			<i :class="icon"></i>
			<span>{{text}}</span>
			<span class="badge" v-if="badge">{{badge}}</span>
		</a>
	</nuxt-link>
	<li v-else>
		<ul>
			<li @click="toggle">
				<a>
					<i :class="icon"></i>
					<span>{{text}}</span>
				</a>
			</li>
		</ul>
		<ul class="menu-group" :data-key="componentUniqueID">
			<slot/>
		</ul>
	</li>
</template>

<script>
   export default {
      data() {
         return {
            componentUniqueID: null
         }
      },
      props: {
         link: {
            required: false
         },
         icon: {
            required: false
         },
         text: {
            required: true
         },
         badge: {
            required: false
         },
         hasChild: {
            required: false,
            default: false
         }
      },
      mounted() {
         this.componentUniqueID = Math.random() * 100
         $('.menu-group').slideUp()
      },
      methods: {
         toggle(e) {
            $(`.menu-group:not([data-key="${this.componentUniqueID}"])`).slideUp()
            $(`.menu-group[data-key="${this.componentUniqueID}"]`).slideToggle()
         }
      }
   }
</script>
