<template>
  <div class="side-nav">
    <div v-for="(title,index) in Object.keys(data)" :key="index" class="group-container">
      <p class="side-nav-title">{{title}}</p>
      <div class="side-nav-items" v-for="(nav,index) in data[title]" :key="index">
        <router-link
          :to="{name: nav.name}"
          v-if="nav.name"
          :class="$route.name===nav.name ? 'active' : ''"
        >{{nav.desc}}</router-link>
        <p v-else class="side-nav-group">{{nav.desc}}</p>
        <div v-for="(item,index) in nav.items" :key="index">
          <router-link
            :to="{name: item.name}"
            :class="$route.name===item.name? 'active': ''"
            class="side-nav-component"
          >{{item.desc}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navConf from "../nav.config.json";
export default {
  data() {
    return {
      data: navConf
    };
  },
  created() {}
};
</script>

<style>
</style>
