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" alt="" />
		</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">Login</div>
			<div class="profile"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const activePath = computed(() => route.path)
	const navList1 = ref([
		{
			name: 'Home',
			path: '/'
		},
		{
			name: 'Collection Story',
			path: '/collection-story'
		},
		{
			name: 'Brand',
			path: '/brand'
		},
		{
			name: 'Digital Item',
			path: '/digital-item'
		}
	])
	const navList2 = ref([
		{
			icon: 'cart_0',
			active_icon: 'cart_1',
			path: '/cart'
		},
		{
			icon: 'user_0',
			active_icon: 'user_1',
			path: '/user'
		}
	])
	const onNavItemClick = (path: string) => {
		if (path === activePath.value) return
		router.push(path)
	}
</script>

<style lang="less">
	#main-header {
		height: 8rem;
		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;
					}
				}
			}
		}
	}
</style>