add login mockup (for backend to testing) reading desc please + minor css fix

src/components/BottomNavigation.vue

@@ -4,7 +4,9 @@
                     <v-btn :to="{name: 'home'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border"
+                    >
                         <v-icon>mdi-map</v-icon>
                         แผนที่
                     </v-btn>
@@ -13,7 +15,8 @@
                     <v-btn :to="{name: 'favorite'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-heart</v-icon>
                         สถานที่โปรด
                     </v-btn>
@@ -21,7 +24,8 @@
                     <v-btn :to="{name: 'setting'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-cog</v-icon>
                         การตั้งค่า
                     </v-btn>
@@ -39,7 +43,7 @@ import {RouterLink} from 'vue-router';
 </script>
 
 <style>
-.v-btn {
+.white-border {
   min-width: 50px;
   border: 3px solid rgba(255, 255, 255, 1);
 }

src/components/TopBar.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-app-bar app class="custom-app-bar">
+    <v-app-bar-nav-icon @click="goBack" v-if="showBackIcon">
+      <v-icon large>mdi-arrow-left</v-icon> 
+    </v-app-bar-nav-icon>
+    <v-toolbar-title class="text-center">{{ pageTitle }}</v-toolbar-title>
+  </v-app-bar>
+</template>
+
+<script>
+export default {
+  props: {
+    showBackIcon: {
+      type: Boolean,
+      default: false
+    },
+    pageTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.custom-app-bar {
+  box-shadow: none;
+}
+</style>