sorvor-front/src/App.vue

<template>
  <v-app>
    <v-main class="bg-main">
      <div class="d-block w-100 text-right pa-3 mb-5">
        <span class="img-logo">
          <router-link to="/">
            <span class="float-left">
              <v-img
                :aspect-ratio="1"
                src="./assets/logo.png"
                width="80"
              ></v-img></span></router-link
        ></span>

        <!-- {{ getUsernameFromLocalStorage }} -->
        <span
          ><v-btn
            variant="text"
            href="/"
            class="mr-3"
          >  <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
          >
          <!-- <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>
  </v-app>
</template>

<script>
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", "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.$store.commit("setCheckPage", "");
      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");
    this.img = localStorage.getItem("img");
    if (this.getUsername == "") {
      this.$store.commit("setUsername", this.username);
    }
    if (this.getImg == "") {
      this.$store.commit("setImg", this.img);
    }
  },
};
</script>
<style>
.img-logo {
  position: absolute;
  left: 0;
  top: 0;
}
* {
  font-family: "IBM Plex Sans Thai", sans-serif;
}
.text-title {
  font-size: 40px;
  font-weight: 500;
  /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
}
.text-normal {
  font-size: 30px;
}
.text-subtitle {
  font-size: 25px;
  font-weight: 600;
}
.text-sub {
  font-size: 24px;
  font-weight: 400;
}
.text-sub2 {
  font-size: 20px;
  /* font-weight: 500; */
}
.text-sub3 {
  font-size: 18px;
  /* font-weight: 500; */
}
.text-small {
  font-size: 16px;
}
.txt-black {
  color: #37332f;
  /* color: black; */
}

@media only screen and (min-width: 0px) and (max-width: 700px) {
  .img-logo {
    display: none;
  }
  .text-title {
    font-size: 25px;
    font-weight: 500;
    /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
  }
  .text-normal {
    font-size: 22px;
  }
  .text-subtitle {
    font-size: 22px;
    font-weight: 600;
  }
  .text-sub {
    font-size: 21px;
    font-weight: 400;
  }
  .text-sub2 {
    font-size: 19px;
    /* font-weight: 500; */
  }
  .text-sub3 {
    font-size: 18px;
    /* font-weight: 500; */
  }
}
</style>