DataOps-platform/frontend/src/components/Side/expansionPanels.vue

<template>
  <v-expansion-panels accordion>
    <v-expansion-panel
      v-for="item in items"
      :key="item.id"
    >
      <!-- <template v-if="item.children && item.children.length > 1"> -->
        <v-expansion-panel-header :hide-actions="!item.children || !item.children.length"
          @click="handleChange(item)">{{ item.name }}</v-expansion-panel-header>
        <v-expansion-panel-content class="noPadding">
            <expansion-panels :items="item.children"></expansion-panels>
        </v-expansion-panel-content>
      <!-- </template> -->
      <!-- <template v-else> -->
        <!-- <v-btn block>
          {{ item.name }}
        </v-btn> -->
        <!-- <v-list dense nav class="cursor pl-5">
          <v-list-item-group
            v-model="selectedItem"
            color="primary"
          >
            <v-list-item>
              <v-list-item-content><v-list-item-title>{{ item.name }}</v-list-item-title></v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list> -->
      <!-- </template> -->
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
// import ExpansionPanels from '@/components/Side/expansionPanels.vue'
export default {
  name: 'expansion-panels',
  // components: { ExpansionPanels },
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      active: false
    }
  },
  created () {
    this.active = this.$route.meta.title
  },
  methods: {
    handleChange (item) {
      if (item.children.length) return
      // console.log(item.path)
      this.$router.push(item.path)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .noPadding {
  .v-expansion-panel-content__wrap {
    padding: 0;
    .v-expansion-panel {
      background: var(--v-accent-lighten4);
    }
  }
}
.cursor {
  cursor: pointer;
  &:hover {
    // background: var(--v-secondary-lighten6);
  }
}
</style>