thebet365/apps/player/src/components/UserAvatarMenu.vue

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
import { useAuthStore } from '../stores/auth';
import { usePlayerProfile } from '../composables/usePlayerProfile';

const { t } = useI18n();
const auth = useAuthStore();
const router = useRouter();
const { avatarUrl } = usePlayerProfile();
const open = ref(false);
const root = ref<HTMLElement | null>(null);

const displayAvatarUrl = computed(() => {
  if (avatarUrl.value) return avatarUrl.value;
  const seed = auth.user?.username;
  return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
});

function toggle() {
  open.value = !open.value;
}

function close() {
  open.value = false;
}

function onOutsideClick(e: Event) {
  if (!root.value?.contains(e.target as Node)) open.value = false;
}

onMounted(() => {
  document.addEventListener('click', onOutsideClick);
  document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
  document.removeEventListener('click', onOutsideClick);
  document.removeEventListener('touchend', onOutsideClick);
});

function goEdit() {
  close();
  router.push('/profile/edit');
}

function goRecharge() {
  close();
  router.push('/wallet/recharge');
}

function logout() {
  close();
  auth.logout();
  router.push('/');
}
</script>

<template>
  <div ref="root" class="avatar-wrap">
    <button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
      <img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
    </button>

    <div v-if="open" class="avatar-menu">
      <div class="menu-user">{{ auth.user?.username }}</div>
      <button type="button" class="menu-item recharge" @click="goRecharge">{{ t('recharge.title') }}</button>
      <button type="button" class="menu-item" @click="goEdit">{{ t('profile.edit') }}</button>
      <button type="button" class="menu-item danger" @click="logout">{{ t('auth.logout') }}</button>
    </div>

    <div v-if="open" class="backdrop" @click="close" />
  </div>
</template>

<style scoped>
.avatar-wrap {
  position: relative;
  z-index: 130;
}

.avatar-btn {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--primary-light);
  background: linear-gradient(145deg, var(--primary-dark), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 0 12px rgba(244, 162, 97, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.avatar-letter {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
}

.avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 140;
}

.menu-user {
  padding: 8px 14px 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-light);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item.recharge {
  color: var(--primary-light);
  font-weight: 700;
}

.menu-item.danger {
  color: var(--danger);
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
}
</style>