keanu-weblite/src/components/YouAre.vue

<template>
  <div>
    <v-chip
      @click="viewProfile"
      class="ma-2 white-space-pre"
      color="#ededed"
      variant="outlined"
      >
      <template v-slot:default>
        <span style="color:black">
      {{ $t("profile_info_popup.you_are") }}&nbsp;
      <span v-if="$matrix.currentUser.is_guest">
        <i18n-t keypath="profile_info_popup.identity_temporary" tag="span">
          <template v-slot:displayName>
            <b>{{ displayName }}</b>
          </template>
        </i18n-t>
      </span>
      <span v-else>
        <i18n-t keypath="profile_info_popup.identity" tag="span">
          <template v-slot:displayName>
            <b>{{ displayName }}</b>
          </template>
        </i18n-t>
      </span>
        </span>
      </template>
      <template v-slot:append>
        <v-avatar color="#e0e0e0" end @click.stop="viewProfile">
          <AuthedImage v-if="userAvatar" :src="userAvatar" />
          <span v-else class="text-white">{{ userAvatarLetter }}</span>
        </v-avatar>
      </template>
    </v-chip>
  </div>
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import AuthedImage from "./AuthedImage.vue";

export default {
  name: "YouAre",
  mixins: [profileInfoMixin],
  components: { AuthedImage },
  data() {
    return {};
  },
  methods: {
    viewProfile() {
      this.$navigation.push({ name: "Profile" }, 1);
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
</style>