Drawer With Expansion List

[al-mutarjim]

I wanted a collapsible navigation drawer in some Nuxt-Vuetify projects and have close to almost nearly achieved it here.

Extrapolating from a somewhat similar Vue Material project and a simpler Vuetify one I added the value to: to ìtems in the Javascript like this

              {
                action: 'pool',
                active: true,
                items: [
                  { title: 'Metaphysics', to: '/queen' },
                  { title: 'Galenic Medicine', to: '/ziggy'  },
                  { title: 'The Organon', to: 'clash'  },
                ],
                title: 'Avicenna',
              },

Then I wanted to call navigation links in my template and tried this.

    <v-list>
      <v-list-group
        v-for="item in items"
        :key="item.title"
        v-model="item.active"
        :prepend-icon="item.action"
        no-action
      >
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </template>

        <v-list-item
          v-for="child in item.items"
          :key="child.title"
          link 
        >
          <v-list-item-content>
            <v-list-item-title v-text="child.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
    </v-list>

Set the link prop on <v-list-item> and the child items become active but I am not sure how to call URLs of the child items there.

I am sure this will prove to be something I should get from API docs, but can anyone drop a hint? Could I request adding this configuration to a wireframe or Codepen or the API docs?