keanu-weblite/src/components/YouAre.vue

<template>
  <div>
    <v-chip
      @click="viewProfile"
      class="ma-2 white-space-pre"
      :color="dark ? 'black' : '#ededed'"
      :text-color="dark ? 'white' : 'black'"
      :variant="!dark ? 'ouelined' : 'tonal'"
      >{{ $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>
      <v-avatar color="#e0e0e0" right @click.stop="viewProfile">
        <AuthedImage v-if="userAvatar" :src="userAvatar" />
        <span v-else class="text-white">{{ userAvatarLetter }}</span>
      </v-avatar>
    </v-chip>
  </div>
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import AuthedImage from "./AuthedImage.vue";

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

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>