<template>
  <ul :class="classe" :data-widget="widget">
    <li  v-for="item in data" :key="item.id" :class="classes(item)">
        <a :href="item.children.length > 0 ? '#' : item.uri" class="nav-link">
            <i :class="`nav-icon ${item.icon}`"></i>
              <p>
                {{$t(item.title) }}
                <i v-if="item.children.length > 0" class="right fas fa-angle-left"></i>
              </p>
        </a>
        <admin-menu v-if="item.children.length > 0"  classe="nav nav-treeview" :data="item.children"></admin-menu>
    </li>
  </ul>
</template>

<script>
  export default {
    props: ['data','classe','widget'],
    mounted(){
      this.init();
    },
    methods: {
        classes: function(item) {
            var classes = ['nav-item'];

            if (item.children.length > 0) {
                classes.push('has-treeview');
            }
            if (item.active) {
                classes.push('active');
            }
            return classes.join(' ');
        },
        init(){
            const url = new URL(window.location);
            // for single sidebar menu
            $('ul.nav-sidebar a').filter(function () {
                return new URL(this.href).pathname === url.pathname && $(this).attr('href')!=='#';
            }).addClass('active');

            // for sidebar menu and treeview
            $('ul.nav-treeview a').filter(function () {
                return new URL(this.href).pathname === url.pathname;
            }).parentsUntil(".nav-sidebar > .nav-treeview")
                .css({'display': 'block'})
                .addClass('menu-open').prev('a')
                .addClass('active');
        }
    }
  };
</script>