<template>
  <v-toolbar dense flat>
    <span v-for="(item,i) in menuItems.left" :key="`x${i}`" class="mx-4 caption">
      <v-avatar color="#ffcc00" size="6" class="mx-2"></v-avatar>
      <span>{{item.label}}</span>
    </span>

    <v-spacer></v-spacer>

    <span v-for="(item,i) in menuItems.right" :key="i" class="mx-4 caption">
      {{item.label}}
    </span>
  </v-toolbar>
</template>

<script>
export default {
  data() {
    return {
      menuItems: {
        left: [
          { label: 'Gratis verzending in NL & BE' },
          { label: 'Meer dan 500 merken' },
          { label: '135 jaar de nieuwste trends' }
        ],
        right: [
          { label: 'Interieuradvies', to: '/interieuradvies' },
          { label: 'Over Buningh', to: '/algemeen' },
          { label: 'Klantenservice', to: '/klantenservice' },
          { label: '+31 10 41 40 560' }
        ]
      },

      menu: [
        { title: 'Verlichting', route: '/' },
        { title: 'Meubels', route: '/' },
        { title: 'Behang', route: '/' },
        { title: 'Stoffen', route: '/' },
        { title: 'Accessoires', route: '/' },
        { title: 'Sale', route: '/' },
        { title: 'Inspiratie', route: '/' },
        { title: 'Merken', route: '/' }
      ]
    }
  },
  computed: {
    title() {
      return `${process.env.NAME}`
    }
  }
}
</script>
    