base_ui/components/global/UserAvatarDropdown.vue

<template>
  <!-- <div class="dropdown vertical-line"> -->
  <div
    v-if="currentUser"
    :style="{ display: $route.name == 'dashboard' ? 'block' : 'flex' }"
    class="dropdown profile-dropdown d-sm-flex align-items-center"
    :class="buildName() + '-user-avatar'"
  >
  <!-- :title="userFullname(currentUser?.user_data)" -->
    <a
      class="nav-link dropdown-toggle px-0"
      href="#"
      role="button"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      data-bs-toggle="dropdown"
    >
      <!-- <span> {{ currentUser?.user_data?.first_name }}&nbsp;&nbsp; </span> -->
      <!-- <span> {{ userFullname(currentUser?.user_data) }}&nbsp;&nbsp; </span> -->

      <svg v-if="isGuest && showRegister" class="icon icon-personal">
        <use class="icon-personal" xlink:href="#icon-personal"></use>
      </svg>
      <!-- :alt="userFullname(currentUser?.user_data)" -->
      <img
        v-else
        class="img-fluid user-avatar"
        :src="avatar"
      />
    </a>

    <div class="dropdown-menu text-right" aria-labelledby="navbarDropdown">
      <NuxtLink
        v-can="'admin_dahsboard'"
        :to="{ name: 'admin' }"
        class="dropdown-item"
        >{{ $t("admin") }}</NuxtLink
      >
      <slot />
      <button
        title="نصب سامانه - در صفحه گوشی یا رایانه"
        class="dropdown-item"
        type="button"
        @click.prevent="checkBeforeInstallingPwa()"
      >
        {{ $t("InstallSystem") }}
      </button>
      <button @click.prevent="logout()" class="dropdown-item">
        {{ $t("Exit") }}
      </button>

      <button
        v-if="isNewVersionAvailable"
        @click="reloadPage()"
        class="dropdown-item"
      >
        <svg style="height: 1em" class="icon icon-reset-form">
          <use xlink:href="#icon-reset-form"></use>
        </svg>
        بروزرسانی
      </button>

      <div v-else style="background-color: #eee" class="text-center px-3">
        نسخه :
        <strong style="font-size: 1.1rem">
          {{ versionNumber }}
        </strong>
      </div>
    </div>
    <a
      v-if="isGuest && showRegister"
      title="ثبت نام"
      href="/login"
      class="text__14 text__blue button button-guest"
      >ثبت نام
    </a>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useAuthStore } from "~/stores/authStore";
import { useStorage } from "@vueuse/core";

/**
 *  @vue-prop {Boolean} [showRegister=true] - نشان می‌دهد که آیا فرم ثبت‌نام نمایش داده شود یا خیر
 *
 * @vue-data {Boolean} [isNewVersionAvailable=false] - نشان می‌دهد که آیا نسخه جدیدی موجود است یا خیر
 * @vue-data {String|null} [envVersion=null] - نسخه محیط
 * @vue-data {String|null} [lsVersion=null] - نسخه ذخیره شده در localStorage
 *
 * @vue-computed {Object} [currentUser] - کاربر فعلی
 * @vue-computed {Boolean} [isGuest] - نشان می‌دهد که آیا کاربر میهمان است یا خیر
 * @vue-computed {String} [versionNumber] - شماره نسخه برنامه از متغیرهای محیطی
 */

export default {
  props: {
    showRegister: {
      default: true,
    },
  },
  async mounted() {
    this.envVersion = import.meta.env.VITE_VERSION;
    this.lsVersion = useStorage("app-version", "0.0.0").value;

    if (this.lsVersion) {
      if (this.envVersion != this.lsVersion) this.isNewVersionAvailable = true;
    }

    this.avatar = await userAvatar(this.currentUser?.user_data);
  },
  data() {
    return {
      isNewVersionAvailable: false,
      envVersion: null,
      lsVersion: null,
      avatar: "",
    };
  },
  computed: {
    ...mapState(useAuthStore, ["currentUser", "isGuest"]),
    versionNumber() {
      return import.meta.env.VITE_VERSION;
    },
  },

  methods: {
    /**
     * صفحه فعلی را مجدداً بارگذاری می‌کند.
     */
    reloadPage() {
      location.reload();
    },

    /**
     * قبل از تلاش برای نصب یک اپلیکیشن وب پیش‌رونده (PWA) مرورگر را بررسی می‌کند.
     * اگر مرورگر Firefox باشد، به کاربر اعلام می‌کند که PWA پشتیبانی نمی‌شود.
     * در غیر این صورت، فرآیند نصب PWA را ادامه می‌دهد.
     */
    checkBeforeInstallingPwa() {
      if (identifyBrowser().includes("Firefox")) {
        alertPwaNotSupported();
      } else {
        installPwa();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.user-avatar-component {
  position: absolute;
  top: calc(50% - 20px);
  left: 0;
}

.in-sidebar {
  // position: absolute;
  // bottom: 6em;
  // left: 0;
  // right: 0;
  justify-content: center;

  .nav-link.dropdown-toggle {
    &::after {
      content: none;
    }
    span {
      display: none;
    }
  }
}
.button {
  min-height: 32px;
  min-width: 92px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border: 2px solid #00b6e3;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  color: var(--primary-color);
  text-decoration: none;
}
.button:hover {
  color: #fff !important;
  background-color: var(--primary-color);
}
.dropdown-toggle:hover {
  color: var(--primary-color);
}
.task-avatar {
  .dropdown-menu {
    position: absolute !important;
  }
}
.majles-user-avatar {
  .button-guest {
    color: #00b7b7 !important;
  }
  .button {
    border: 2px solid #1d645a;
  }
  .button:hover {
    color: #fff !important;
    background-color: #316161;
  }
}
</style>