Navigator.vue

<template>
  <v-card tile>
    <v-card-title>Navigation</v-card-title>
    <v-navigation-drawer permanent right>
      <v-divider></v-divider>
      <v-list nav dense>
        <v-list-item-group v-model="selectedItem" color="primary">
          <v-list-item
            v-for="section in reportCardStructure.sections"
            :key="section.id"
          >
            <v-list-item-content>
              <v-list-item-title v-text="section.title"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </v-card>
</template>

<script>
export default {
  props: {
    reportCardStructure: {
      type: Object,
      default: () => {},
    },
  },
  data: () => ({
    selectedItem: 0,
  }),
}
</script>

<style></style>