84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
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-10 w-auto max-w-[9rem] object-contain" />
|
|
</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 router from '@/router'
|
|
import Icon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import { getProjectMobileNavLogo, isBoursecuProject } from '@/utils/config'
|
|
|
|
const { y } = useWindowScroll()
|
|
const userStore = useUserStore()
|
|
const projectLogo = computed(() => getProjectMobileNavLogo())
|
|
|
|
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>
|