Code-Create/src/components/main-header.vue

<template>
	<header class="main-header" v-scroll-progress>
		<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
		<div class="center-nav">
			<div class="nav-item" v-for="item in navList" :key="item.name">
				<down-menu :title="$t(item.name)" v-if="item.children">
					<router-link :to="child.path" v-for="(child) in item.children" :key="child.name">
						{{ $t(child.name) }}
					</router-link>
				</down-menu>
				<router-link class="link hover-bottom-animation" :to="item.path" v-else>{{
					$t(item.name)
				}}</router-link>
			</div>
		</div>
		<div class="right">
			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
				<router-link
					class="link"
					:to="`/${item.value}${path}`"
					v-for="item in langList"
					:key="item.value"
					v-show="item.value !== locale"
				>
					{{ item.label }}
				</router-link>
			</down-menu>
			<router-link class="link" to="/my-account">
				<span class="iconfont icon-tubiao-"></span>
				<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
				<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
			</router-link>
		</div>
	</header>
</template>
<script setup lang="ts">
	import { ref, watch, computed } from 'vue'
	import DownMenu from './down-menu.vue'
	import { setLang, LangType } from '../lang'
	import { useI18n } from 'vue-i18n'
	const { locale } = useI18n()
	import { useRoute } from 'vue-router'
	import { useUserInfoStore } from '@/stores/userInfo'
	const userInfoStore = useUserInfoStore()
	const token = computed(() => userInfoStore.state.token)
	const route = useRoute()
	const lang = computed(() => route.params.lang)
	const path = computed(() => route.path.replace(new RegExp(`^/${lang.value}/`), '/'))
	if (lang.value) setLang(lang.value)
	watch(lang, (newVal) => {
		if (lang.value) setLang(newVal)
	})
	const langList = ref([
		{
			label: 'English',
			value: LangType.en
		},
		{
			label: '简体中文',
			value: LangType.zhCn
		},
		{
			label: '繁體中文',
			value: LangType.zhTw
		}
	])

	const navList:any = ref([
		{
			name: 'MainHeader.Home',
			path: '/'
		},
		{
			name: 'MainHeader.AboutUs',
			path: '/about-us'
		},
		{
			name: 'MainHeader.OurSolutions',
			path: '',
			children: [
				{
					name: 'MainHeader.AiDA',
					path: '/aida'
				},
				{
					name: 'MainHeader.Mixi',
					path: '/mixi'
				}
			]
		},
		{
			name: 'MainHeader.Communities',
			path: '',
			children: [
				{
					name: 'MainHeader.Events',
					path: '/events'
				},
				{
					name: 'MainHeader.UserStories',
					path: '/user-stories'
				},
				{
					name: 'MainHeader.HelpCentre',
					path: '/help-centre'
				}
			]
		},
		{
			name: 'MainHeader.Media',
			path: '/media'
		},
		{
			name: 'MainHeader.ContactUs',
			path: '/contact-us'
		}
	])
</script>
<style lang="less" scoped>
	.main-header {
		position: fixed;
		width: 100%;
		height: var(--main-header-height, 85px);
		padding: 15px 30px;
		box-sizing: border-box;
		top: 0;
		left: 0;
		z-index: 10000;
		transition: background-color 0.2s linear;
		&.active {
			background-color: #0a0a0a;
		}
		display: flex;
		justify-content: space-between;
		align-items: center;
		> .logo {
			height: 100%;
			width: auto;
			img {
				width: auto;
				height: 100%;
			}
		}
		> .center-nav {
			display: flex;
			align-items: center;
			justify-content: center;
			> .nav-item {
				position: relative;
				&:deep(> .down-menu > .title),
				> .link {
					margin: 0 14px;
					color: #fff;
					font-size: 14px;
					text-decoration: none;
					line-height: 37px;
					display: inline-block;
				}
				> .child {
					position: absolute;
					bottom: 0;
					visibility: hidden;
					width: 250px;
					height: auto;
					padding: 10px 0;
					box-sizing: border-box;
					border: 1px solid #e1e1e1;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					transform: translateY(calc(100% + 5px));
					> .child-link {
						display: inline-block;
						padding: 10px 15px;
						color: #000;
						font-size: 15px;
						text-decoration: none;
						text-align: left;
						&:hover {
							opacity: 0.5;
						}
					}
				}
				&:hover > .child {
					animation: child-show 0.2s linear both;
				}
				@keyframes child-show {
					0% {
						visibility: hidden;
						// opacity: 0;
					}
					100% {
						// opacity: 1;
						transform: translateY(100%);
						visibility: visible;
					}
				}
			}
		}
		> .right {
			display: flex;
			align-items: center;
			justify-content: center;
			> .link {
				margin: 0 14px;
				color: #fff;
				font-size: 14px;
				text-decoration: none;
				line-height: 37px;
				display: inline-block;
				display: flex;
				align-items: center;
				justify-content: center;
				&:hover {
					opacity: 0.8;
				}
				> .iconfont {
					margin-right: 5px;
					font-size: 22px;
				}
			}
		}
	}
</style>