แก้ไข UI / UX ทำ function search ใหม่ ตามบรีฟพี่อาร์ม

src/App.vue

@@ -15,18 +15,68 @@
         <!-- {{ getUsernameFromLocalStorage }} -->
         <span
           ><v-btn
-            icon="mdi-home-variant-outline"
             variant="text"
             href="/"
-          ></v-btn
-          ><v-btn variant="text" v-if="getUsername" to="/profile">
-            <v-icon icon="mdi-account-outline" ></v-icon>{{ getUsername }}</v-btn
+            class="mr-3"
+          >  <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></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
-        >
+          <!-- <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-if="
+              getUsername == '' ||
+              getUsername == null ||
+              getUsername == undefined
+            "
+            to="/login"
+            style="font-size: medium;"
+          >
+            <v-icon icon="mdi-login"  size="25"></v-icon> เข้าสู่ระบบ
+          </v-btn>
+          <v-menu transition="slide-x-transition" v-if="getUsername">
+            <template v-slot:activator="{ props }">
+              <v-btn elevated color="#F4C03F" v-bind="props" height="40">
+                <v-avatar
+                  color="#635d56"
+                  v-if="getImg"
+                  :image="getImg"
+                  size="30"
+                >
+                </v-avatar
+                ><v-avatar size="40" v-else>
+                  <v-icon
+                    icon="mdi-account-circle"
+                    color="white"
+                    size="30"
+                  ></v-icon>
+                </v-avatar>
+                <span class="ml-3" style="font-size: medium;">{{ getUsername }}</span>
+              </v-btn></template
+            >
+            <v-list>
+              <v-list-item
+                :key="0"
+                :value="0"
+                @click="$router.push('/profile')"
+              >
+                <v-list-item-title>
+                  <v-icon icon="mdi-account-edit"></v-icon> แก้ไขข้อมูลส่วนตัว
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item :key="1" :value="1" @click="logout">
+                <v-list-item-title>
+                  <v-icon icon="mdi-logout"></v-icon> ออกจากระบบ
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </span>
       </div>
       <router-view />
     </v-main>
@@ -41,20 +91,26 @@ import { mapGetters } from "vuex";
 export default {
   name: "App",
   computed: {
-    ...mapGetters(["getUsername"]),
+    ...mapGetters(["getUsername", "getImg"]),
   },
   components: {
     // MainVote,
   },
 
   data: () => ({
+    img: "",
     username: "",
+    items: [
+      { title: "แก้ไขข้อมูลส่วนตัว", icon: "mdi-account-edit", to: "/profile" },
+      { title: "ออกจากระบบ", icon: "mdi-logout", to: "/profile" },
+    ],
   }),
   methods: {
     logout() {
       localStorage.clear();
       // location.reload();
       this.$store.commit("setUsername", "");
+      this.$store.commit("setImg", "");
       this.$router.push("/");
     },
   },
@@ -66,10 +122,13 @@ export default {
     //   }
     // });
     this.username = localStorage.getItem("username");
-   if(this.getUsername==""){
-    this.$store.commit("setUsername", this.username);
-   } 
-    
+    this.img = localStorage.getItem("img");
+    if (this.getUsername == "") {
+      this.$store.commit("setUsername", this.username);
+    }
+    if (this.getImg == "") {
+      this.$store.commit("setImg", this.img);
+    }
   },
 };
 </script>