<template>

    <v-layout class="overflow-visible" style="height: 56px;">
      <v-bottom-navigation
        v-model="value"
        color="teal"
        grow
      >
        <router-link :to="{name: 'home'}">
            <v-btn :to="{name: 'home'}">
                <v-icon>mdi-map</v-icon>
                แผนที่
            </v-btn>
        </router-link>

        <router-link :to="{name: 'favorite'}">
            <v-btn :to="{name: 'favorite'}">
                <v-icon>mdi-heart</v-icon>
                สถานที่โปรด
            </v-btn>
        </router-link>

        <router-link :to="{name: 'setting'}">
            <v-btn :to="{name: 'setting'}">
                <v-icon>mdi-cog</v-icon>
                การตั้งค่า
            </v-btn>
        </router-link>

      </v-bottom-navigation>
    </v-layout>

  </template>

  <script>
  import {RouterLink} from 'vue-router';
  
    export default {
      data: () => ({ value: 1 }),
    }
  </script>