boursecu_user/src/views/base/home/components/AppHeader.vue

<template>
  <div
    :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
    class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
  >
    <div class="flex justify-between my-2 items-center">
      <div v-if="isBoursecuProject()" class="flex items-center gap-2">
        <img :src="projectLogo" alt="" class="h-8 w-auto object-contain" />
        <div class="color-transition font-bold text-primary">{{ appName }}</div>
      </div>
      <div v-else class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
        <div
          class="z-100000 rounded-full border-1"
          :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
        >
          <Icon icon="vuesax-linear:user" size="20" />
        </div>
        <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
          {{ userStore.userInfo?.name }}
        </div>
      </div>

      <div class="flex items-center gap-2">
        <button
          v-if="isBoursecuProject()"
          type="button"
          class="mhome-header-btn"
          @click="router.push({ name: 'user' })"
        >
          <Icon icon="vuesax-linear:user" size="18" />
        </button>
        <button
          type="button"
          class="mhome-header-btn mhome-header-btn--logout"
          @click="$emit('logout')"
        >
          <Icon icon="vuesax-linear:logout" size="18" />
          <span>خروج</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { useUserStore } from '@/store/userStore'
import { useConfigStore } from '@/store/configStore'
import router from '@/router'
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import { getProjectNavLogo, isBoursecuProject } from '@/utils/config'

const { y } = useWindowScroll()
const userStore = useUserStore()
const config = useConfigStore()
const projectLogo = computed(() => getProjectNavLogo())
const appName = computed(() => config.config?.name_fa || config.config?.name || 'بورس مس')

defineEmits<{
  logout: []
}>()
</script>

<style scoped>
.mhome-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #0a1b37;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.mhome-header-btn--logout {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}
</style>