default.vue

<template>
    <div class="app">
        <NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
        <Nuxt />
    </div>
</template>

<script>
export default {
  data() {
    return {
      breadcrumb: [],
      menus : [{
            title: 'Prévisions',
            items : [
              {path: '/previsions',title: 'En préparation'},
              {path: '/previsions/newcomers',title: 'Futurs membres'}
          ]},
          {
            title: 'Toile de confiance',
            items : [
              {path: '/membres',title: 'Membres'}
          ]},
          {
          title: 'En Développement',
          items : [
              {path: '/chartjs',title: 'ChartJS'},
          ]},
      ]
    }
  },
  created() {
    this.$nuxt.$on('changeRoute', (breadcrumb) => {
        this.breadcrumb = breadcrumb
    })
  }
}
</script>

<style lang="scss">
/* Define styles for the default root window element */
:root {
  --text-primary-color: var(--dark);
  --text-secondary-color: #8a8a8a;
  --background-color-primary: var(--white);
  --background-color-secondary: #e9ecef;
  --element-size: 4rem;
  --menu-size: 320px;
}

/* Define styles for the root window with dark - mode preference */
:root.dark-theme {
  --text-primary-color: var(--white);
  --text-secondary-color: #c9c9c9;
  --background-color-primary: var(--dark);
  --background-color-secondary: hsl(210, 16%, 60%);
}

.app {
    transition: margin .5s ease-in-out;
}
main {
  padding-top: 5rem;
  position: relative;
}
</style>