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

<template>
	<header class="main-header" v-scroll-progress>
		<img class="logo" src="../assets/logo-full.png" alt="code-create" />
		<div class="center-nav">
			<div class="nav-item" v-for="item in navList" :key="item.path">
				<router-link class="nav-item-link" :to="item.path">
					{{ item.name }}
				</router-link>
			</div>
		</div>
		<div class="right">
			<span>English</span>
			<span>My Account</span>
		</div>
	</header>
</template>
<script setup lang="ts">
	import { ref, onMounted, onUnmounted } from "vue";
	import { useRouter } from "vue-router";
	const router = useRouter();
	const navList = ref([
		{
			name: "Home",
			path: "/",
		},
		{
			name: "About Us",
			path: "/about",
		},
		{
			name: "Our Solutions",
			path: "/solutions",
		},
		{
			name: "Communities",
			path: "/communities",
		},
		{
			name: "Media",
			path: "/media",
		},
		{
			name: "Contact Us",
			path: "/contact",
		},
	]);
</script>
<style lang="less" scoped>
	.main-header {
		position: fixed;
		width: 100%;
		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;
		}
		> .center-nav {
			display: flex;
			align-items: center;
			justify-content: center;
			> .nav-item {
				> .nav-item-link {
					margin: 0 14px;
					color: #fff;
					font-size: 16px;
				}
			}
		}
	}
</style>