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

<script>
export default {
  data() {
    return {
      breadcrumb: [],
      menus : [
          {
          title: 'Développement',
          items : [
              {path: '/chartjs',title: 'ChartJS'},
              {path: '/membres',title: 'Membres'}
          ]},
          {
          title: 'Un menu',
          items : [
              {path: '/lien',title: 'Un lien'},
              {path: '/autrelien',title: 'Un aure lien'}
          ]}
      ]
    }
  },
  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: var(--secondary);
  --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: var(--secondary);
  --background-color-primary: var(--dark);
  --background-color-secondary: hsl(210, 16%, 60%);
}

.app {
    transition: margin .5s ease-in-out;
}
</style>