<template>
  <li class="nav-item">
    <a
      class="nav-link"
      :href="'#' + link.id"
      :target="link.target"
      :to="link.path"
      data-toggle="collapse"
      role="button"
      aria-expanded="false"
      aria-controls="navbar-dashboards"
    >
      <i :class="link.icon"></i>
      <span class="nav-link-text">{{ link.name }}</span>
    </a>
    <div class="collapse" :id="link.id">
      <ul class="nav nav-sm flex-column">
        <router-link
          v-for="(item, index) in link.children"
          :key="index"
          :to="item.path"
          @click.native="linkClick"
          class="nav-link"
          :target="item.target"
          :href="item.path"
        >
          <template>
            <i :class="item.icon"></i>
            <span class="nav-link-text">{{ item.name }}</span>
          </template>
        </router-link>
      </ul>
    </div>
  </li>
</template>
<script>
export default {
  name: "sidebar-group-item",
  props: {
    link: {
      type: Object,
      default: () => {
        return {
          name: "",
          path: "",
          children: []
        };
      },
      description:
        "Sidebar link. Can contain name, path, icon and other attributes. See examples for more info"
    }
  },
  inject: {
    autoClose: {
      default: true
    }
  },
  data() {
    return {
      children: [],
      collapsed: true
    };
  },
  methods: {
    linkClick() {
      if (
        this.autoClose &&
        this.$sidebar &&
        this.$sidebar.showSidebar === true
      ) {
        this.$sidebar.displaySidebar(false);
      }
    }
  }
};
</script>
