frontend/src/components/BottomNavigation.vue

<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">
                        <v-icon>mdi-map</v-icon>
                        แผนที่
                    </v-btn>


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

                    <v-btn :to="{name: 'setting'}"
                    block rounded="lg"
                    min-width="20px"
                    max-width="120px">
                        <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>
.v-btn {
  min-width: 50px;
}
</style>