<template>

  <v-app>
    <v-navigation-drawer expand-on-hover
                         rail
                         rail-width="65"
                         class="bg-deep-purple"
                         theme="dark"
                         permanent>
      <v-list-item prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
                   :title="appname">
        <template v-slot:append>
          <v-btn variant="text"
                 icon="mdi-chevron-left">
          </v-btn>
        </template>
      </v-list-item>
      <v-divider></v-divider>
      <navigation :routes="routes"></navigation>
      <template v-slot:append>
        <v-list density="compact"
                nav>
          <v-list-item prepend-icon="mdi-home-city"
                       title="登出"
                       value="home">
          </v-list-item>
        </v-list>
      </template>
    </v-navigation-drawer>
    <v-main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
    </v-footer>
  </v-app>
</template>

<script>
import navigation from '@/components/navigation/'
import { mapGetters } from 'vuex'
export default {
  name: 'DefLayout',
  components: {
    navigation,
  },
  computed: {
    ...mapGetters(['appname', 'routes']),
  },
  data() {
    return {}
  },
}
</script>