heathers-playground

<template>
  <div class="text-center">
    <h1 class="text--primary">👋Hello World!👋</h1>

    <v-navigation-drawer
      app
      permanent
    >
      <v-list-item>
        <v-list-item-content>
          <div class="purple lighten-3">
            <v-list-item-title

              class="title"
            >
              Heather's Site
            </v-list-item-title>

            <v-list-item-subtitle>
              Leider
            </v-list-item-subtitle>
          </div>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list
        dense
        nav
      >
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>

          </v-list-item-content>
        </v-list-item>
      </v-list>

    </v-navigation-drawer>

    <v-container fill-height>
      <v-row justify="center">
        <v-card
          class="float-left"
          height="400"
          width="400"
        >
          <v-carousel>
            <v-carousel-item src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-light.png">

            </v-carousel-item>
          </v-carousel>
        </v-card>
      </v-row>
    </v-container>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Photos', icon: 'mdi-image' },
          { title: 'About', icon: 'mdi-help-box' },
        ],
        right: null,
      }
    },
  }
</script>