<template>
  <v-app dark>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      clipped
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in menu"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar
      clipped-left
      fixed
      app
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-btn
        icon
        @click.stop="miniVariant = !miniVariant"
      >
        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
      </v-btn>

      <v-toolbar-title v-text="title" />
      <v-spacer />
    </v-app-bar>
    <v-content>
      <v-breadcrumbs :items="breadcrumbs">
        <template v-slot:divider>
          <v-icon>mdi-chevron-right</v-icon>
        </template>
      </v-breadcrumbs>
      <h2 class="display-1 grey lighten-4 font-weight-thin">
        <v-container>
          {{ title }}
        </v-container>
      </h2>
      <nuxt />
    </v-content>
    <v-footer
      fixed
      app
    >
      <span>Nubium Artifex &copy; 2019</span>
    </v-footer>
    <v-snackbar
      :value="snackbar.showIt"
      :timeout="snackbar.timeout"
      :color="snackbar.color"
    >
      {{ snackbar.msg }}
      <v-btn
        text
        @click="$store.commit('admin/ui/snackClose')"
      >
        Fermer
      </v-btn>
    </v-snackbar>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    drawer: true,
    miniVariant: false
  }),
  computed: {
    title () {
      return this.$store.state.admin.ui.title
    },
    breadcrumbs () {
      return this.$store.state.admin.ui.breadcrumbs
    },
    menu () {
      return this.$store.state.admin.ui.menu
    },
    snackbar () {
      return this.$store.state.admin.ui.snackbar
    }
  },
  methods: {}
}
</script>
