return-youtube-dislike/Website/pages/documentation.vue

<template>
  <div>
    <v-card max-width="600px" class="rounded-lg">
      <v-card-title style="padding-bottom: 0;">Sections</v-card-title>
      <v-list>
        <v-list-item v-for="(item, i) in links" :key="i" router :to=item.to>
          <v-list-item-icon>
            <v-icon v-text="item.icon" />
          </v-list-item-icon>
          <v-list-item-title style="text-align: left;">
            <v-list-item-title v-text="item.text" />
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>

    <v-card max-width="600px" class="rounded-lg" style="margin: 1em; padding: 0.75em; text-align: left;">
      <NuxtChild />
    </v-card>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        links: [{
            text: 'API Usage Rights',
            icon: 'mdi-book-open-variant',
            to: 'documenation/usage-rights'
          },
          {
            text: 'API URL Information',
            icon: 'mdi-web',
            to: 'documenation/url'
          },
          {
            text: 'Available Endpoints',
            icon: 'mdi-transit-connection-variant',
            to: 'documenation/endpoints'
          },
          {
            text: 'Basic Fetching Tutorial',
            icon: 'mdi-school',
            to: 'documenation/fetching'
          },
        ]
      }
    }
  }

</script>