update edit / login / responsive

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-main class="bg-main">
-      <div class="d-block w-100 text-right pa-3">
+      <div class="d-block w-100 text-right pa-3 mb-5">
         <span class="img-logo">
           <router-link to="/">
             <span class="float-left">
@@ -11,15 +11,21 @@
                 width="80"
               ></v-img></span></router-link
         ></span>
+
+        <!-- {{ getUsernameFromLocalStorage }} -->
         <span
           ><v-btn
             icon="mdi-home-variant-outline"
             variant="text"
             href="/"
           ></v-btn
-          ><v-btn icon="mdi-account-outline" variant="text"></v-btn>
-          <v-btn variant="text"> Sign In </v-btn>
-          <v-btn elevated color="#F4C03F"> Get Started </v-btn></span
+          ><v-btn variant="text" v-if="getUsername" to="/profile">
+            <v-icon icon="mdi-account-outline" ></v-icon>{{ getUsername }}</v-btn
+          >
+          <v-btn variant="text" v-if="getUsername" @click="logout" class="mr-2"><v-icon icon="mdi-logout"></v-icon> Logout </v-btn>
+          <v-btn variant="text" class="mr-2" v-else to="/login" > <v-icon icon="mdi-login"></v-icon> Log In </v-btn>
+
+          <v-btn elevated color="#F4C03F" to="/check" href="#started" > Get Started </v-btn></span
         >
       </div>
       <router-view />
@@ -31,17 +37,40 @@
 import { client } from "./utils/trpc";
 client.info.getAllZones.query({}).then(console.log);
 // import MainVote from "./components/MainVote.vue";
-
+import { mapGetters } from "vuex";
 export default {
   name: "App",
-
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
   components: {
     // MainVote,
   },
 
   data: () => ({
-    //
+    username: "",
   }),
+  methods: {
+    logout() {
+      localStorage.clear();
+      // location.reload();
+      this.$store.commit("setUsername", "");
+      this.$router.push("/");
+    },
+  },
+  mounted() {
+    // this.$emitter.on("loginUser", (val) => {
+    //   console.log("user", val);
+    //   if (val) {
+    //     this.username = localStorage.getItem("username");
+    //   }
+    // });
+    this.username = localStorage.getItem("username");
+   if(this.getUsername==""){
+    this.$store.commit("setUsername", this.username);
+   } 
+    
+  },
 };
 </script>
 <style>
@@ -90,23 +119,23 @@ export default {
     display: none;
   }
   .text-title {
-    font-size: 28px;
+    font-size: 25px;
     font-weight: 500;
     /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
   }
   .text-normal {
-    font-size: 25px;
+    font-size: 22px;
   }
   .text-subtitle {
     font-size: 22px;
     font-weight: 600;
   }
   .text-sub {
-    font-size: 23px;
+    font-size: 21px;
     font-weight: 400;
   }
   .text-sub2 {
-    font-size: 20px;
+    font-size: 19px;
     /* font-weight: 500; */
   }
   .text-sub3 {