Aida_Purchaser_Front/src/views/main-header.vue

<template>
	<div class="main-header" id="main-header">
		<div class="left">
			<img class="logo" src="@/assets/images/logo.png" @click="onNavItemClick('/')" />
		</div>
		<div class="center">
			<div
				v-for="v in navList1"
				:key="v.path"
				class="nav-item"
				:class="{ active: activePath === v.path }"
				@click="onNavItemClick(v.path)"
			>
				<span>{{ v.name }}</span>
			</div>
		</div>
		<div class="right">
			<div
				class="icon"
				v-for="v in navList2"
				:key="v.path"
				:class="{ active: activePath === v.path }"
				@click="onNavItemClick(v.path)"
			>
				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
			</div>
			<div class="login" @click="onLogin">Login</div>
			<el-popover
				ref="profilePopover"
				placement="bottom-end"
				trigger="click"
				:show-arrow="false"
				popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
			>
				<template #reference><div class="profile"></div></template>
				<template #default>
					<div class="profile-content">
						<div class="info">
							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
							<div class="content">
								<div class="profile"></div>
								<div class="name">Hi, Alexandra_chen</div>
							</div>
						</div>
						<div class="nav-item" @click="onMyWardrobe">
							<div class="icon"><svg-icon name="my_wardrobe" size="18" /></div>
							<div class="label">My Wardrobe</div>
						</div>
						<div class="nav-item" @click="onNotifications">
							<div class="icon"><svg-icon name="notifications" size="14" /></div>
							<div class="label">Notifications</div>
						</div>
						<div class="nav-item" @click="onSettings">
							<div class="icon"><svg-icon name="settings" size="16" /></div>
							<div class="label">Settings</div>
						</div>
						<div class="hr"></div>
						<div class="nav-item logout" @click="onLogout">
							<div class="icon"><svg-icon name="logout" size="20" /></div>
							<div class="label">Log off</div>
						</div>
					</div>
				</template>
			</el-popover>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import myEvent from '@/utils/myEvent'
	const router = useRouter()
	const route = useRoute()
	const activePath = computed(() => route.path)
	const navList1 = ref([
		{
			name: 'Home',
			path: '/'
		},
		{
			name: 'Collection Story',
			path: '/collectionStory'
		},
		{
			name: 'Brand',
			path: '/brand'
		},
		{
			name: 'Digital Item',
			path: '/digitalItem'
		}
	])
	const navList2 = ref([
		{
			icon: 'cart_0',
			active_icon: 'cart_1',
			path: '/shoppingCart'
		},
		{
			icon: 'user_0',
			active_icon: 'user_1',
			path: '/user'
		}
	])
	const onNavItemClick = (path: string) => {
		if (path === activePath.value) return
		router.push(path)
	}
	const onLogin = () => {
		myEvent.emit('openLoginDialog')
	}
	const profilePopover = ref(null)
	const hideProfilePopover = () => {
		profilePopover.value?.hide()
	}
	const onMyWardrobe = () => {
		hideProfilePopover()
		console.log('my wardrobe')
		router.push('/wardrobe')
	}
	const onNotifications = () => {
		hideProfilePopover()
		router.push('/notifications')
	}
	const onSettings = () => {
		hideProfilePopover()
		router.push('/settings')
	}
	const onLogout = () => {
		hideProfilePopover()
		console.log('logout')
	}
</script>

<style lang="less" scoped>
	#main-header {
		height: var(--header-height);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		background: #ffffff;
		padding: 0 9rem;
		border-bottom: 0.1rem solid #c4c4c4;
		user-select: none;
		> .left {
			> .logo {
				width: auto;
				height: 4rem;
			}
		}
		> .right {
			> * {
				cursor: pointer;
			}
			> .icon {
				width: 2.4rem;
				height: 2.4rem;
			}
			> .login {
				font-family: Kaisei Opti;
				font-size: 1.6rem;
			}
			> .profile {
				width: 4rem;
				height: 4rem;
				border-radius: 50%;
				background: #f5f5f5;
			}
		}
		> .center,
		> .right {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 2.6rem;
		}

		> .center {
			position: absolute;
			height: 80%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			> .nav-item {
				height: 100%;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				> span {
					padding: 0 1rem;
					line-height: 2.4rem;
					font-size: 1.6rem;
					color: #232323;
					border-bottom: 0.1rem solid transparent;
					font-family: Kaisei Opti;
				}
				&.active {
					> span {
						border-bottom-color: #232323;
						font-weight: 700;
					}
				}
			}
		}
	}
	.profile-content {
		width: 100%;
		> .info {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 2rem;
			> img {
				width: 100%;
				height: auto;
			}
			> .content {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				gap: 1rem;
				> .profile {
					width: 5rem;
					height: 5rem;
					border-radius: 50%;
					background: #cfcfcf;
				}
				> .name {
					font-size: 1.4rem;
					color: #232323;
				}
			}
		}
		> .hr {
			margin: 1.2rem 1rem;
			border-top: 0.1rem solid #c4c4c4;
		}
		> .nav-item {
			margin-left: 2rem;
			margin-bottom: 1.2rem;
			display: flex;
			align-items: center;
			height: 2rem;
			user-select: none;
			cursor: pointer;
			> .icon {
				width: 2rem;
				height: 2rem;
				margin-right: 1rem;
			}
			> .label {
				font-family: KaiseiOpti-Regular;
				font-size: 1.2rem;
				color: #585858;
			}
		}
		> .logout {
			> .label {
				font-family: KaiseiOpti-Medium;
				font-size: 1.4rem;
				color: #232323;
			}
		}
	}
</style>