app_vue2/layouts/default.vue

<template>
  <v-app dark>
    <v-navigation-drawer
      :mini-variant="miniVariant"
      :clipped="clipped"
      class="dark_grey"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon class="navigation">{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="navigation" v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      :clipped-left="clipped"
      fixed
      app
      class="green header"
    >
      <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-main class="super_light_grey">
      <v-container>
        <nuxt />
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        clipped: true,
        fixed: true,
        items: [
          {
            icon: 'mdi-apps',
            title: 'Accueil',
            to: '/'
          },
          {
            icon: 'mdi-chart-bubble',
            title: 'Répertoire',
            to: '/accesses/list'
          }
        ],
        miniVariant: false,
        title: 'Etablissement d\'Enseignement Artistique'
      }
    }
  }
</script>

<style scoped>
  .navigation{
    color:#b8c7ce;
  }
  .header{
    color:#ffffff;
  }
</style>