fixing bottom nav

src/components/BottomNavigation.vue

@@ -1,30 +1,31 @@
 <template>
      <v-layout class="overflow-visible" style="height: 56px">
-    <v-bottom-navigation
-            class = "overflow"
-            v-model="value"
-                grow
-            >
-                <router-link :to="{name: 'home'}">
-                    <v-btn :to="{name: 'home'}">
+    <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>
-                </router-link>
 
-                <router-link :to="{name: 'favorite'}">
-                    <v-btn :to="{name: 'favorite'}">
+
+                    <v-btn :to="{name: 'favorite'}"
+                    block rounded="lg"
+                    min-width="20px"
+                    max-width="120px">
                         <v-icon>mdi-heart</v-icon>
                         สถานที่โปรด
                     </v-btn>
-                </router-link>
 
-                <router-link :to="{name: 'setting'}">
-                    <v-btn :to="{name: 'setting'}">
+                    <v-btn :to="{name: 'setting'}"
+                    block rounded="lg"
+                    min-width="20px"
+                    max-width="120px">
                         <v-icon>mdi-cog</v-icon>
                         การตั้งค่า
                     </v-btn>
-                </router-link>
+
     </v-bottom-navigation>
 </v-layout>
 </template>
@@ -35,4 +36,10 @@ import {RouterLink} from 'vue-router';
     data: () => ({ value: 1 }),
   }
 
-</script>
+</script>
+
+<style>
+.v-btn {
+  min-width: 50px;
+}
+</style>

src/components/searchbar.vue

@@ -3,7 +3,6 @@
         <v-app-bar scroll-threshold="0"
             class="mx-auto px-auto"
             >
-
             <v-text-field
             density="compact"
             variant="solo"