main header

src/components/main-header.vue

@@ -1,14 +1,56 @@
 <template>
-	<header class="main-header" v-scroll-progress></header>
+	<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;
+		height: 55px;
+		padding: 15px 30px;
 		top: 0;
 		left: 0;
 		z-index: 10000;
@@ -16,5 +58,24 @@
 		&.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>