<template>
     <v-layout class="overflow-visible" style="height: 56px">
    <v-bottom-navigation>
                    <v-btn :to="{name: 'home'}"
                    block rounded="lg"
                    min-width="20px"
                    max-width="120px"
                    class = "white-border"
                    >
                        <v-icon>mdi-map</v-icon>
                        แผนที่
                    </v-btn>


                    <v-btn :to="{name: 'favorite'}"
                    block rounded="lg"
                    min-width="20px"
                    max-width="120px"
                    class = "white-border">
                        <v-icon>mdi-heart</v-icon>
                        สถานที่โปรด
                    </v-btn>

                    <v-btn :to="{name: 'setting'}"
                    block rounded="lg"
                    min-width="20px"
                    max-width="120px"
                    class = "white-border">
                        <v-icon>mdi-cog</v-icon>
                        การตั้งค่า
                    </v-btn>

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

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

</script>

<style>
.white-border {
  min-width: 50px;
  border: 3px solid rgba(255, 255, 255, 1);
}
</style>