<template>
  <div>
    <topbar />

    <v-row align="center" justify="space-between">
      <div class="d-flex mx-4">
        <v-card class="ma-3 pa-6" outlined tile>LOGO Buningh</v-card>
        <v-row align="center" class="mx-4">
          <v-col>
            <v-btn
              text
              small
              :to="item.to"
              v-for="(item,i) in menu"
              :key="i"
              class="mx-4"
            >{{item.title}}</v-btn>
          </v-col>
        </v-row>
      </div>

      <div class="d-flex">
        <v-text-field
          v-model="search"
          append-icon="icon-search"
          label="Zoeken naar merk of product.."
          single-line
          hide-details
          outlined
        ></v-text-field>

        <v-row align="center" class="mx-4">
          <v-col>
            <v-btn icon to="/login">
              <v-icon>icon-password</v-icon>
            </v-btn>
          </v-col>
          <v-col>
            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>
          </v-col>
          <v-col>
            <v-btn icon>
              <v-icon>mdi-shopping-outline</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </div>
    </v-row>
  </div>
</template>

<script>
import Topbar from '~/components/layout/Header/Topbar'

export default {
  components: {
    Topbar
  },
  data() {
    return {
      search: '',
      menu: [
        { title: 'Verlichting', to: '/' },
        { title: 'Meubels', to: '/' },
        { title: 'Behang', to: '/' },
        { title: 'Stoffen', to: '/' },
        { title: 'Accessoires', to: '/' }
      ]
    }
  },
  computed: {
    title() {
      return `${process.env.NAME}`
    }
  }
}
</script>
    