<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="link" :to="item.path" v-if="item.path">
					{{ item.name }}
				</router-link>
				<span v-else class="link">{{ item.name }}</span>
				<div
					class="child"
					v-if="item.children && item.children.length > 0"
				>
					<router-link
						class="child-link"
						:to="child.path"
						v-for="child in item.children"
						:key="child.path"
					>
						{{ child.name }}
					</router-link>
				</div>
			</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 { useRoute } from "vue-router";
	const route = useRoute();
	console.log(route);
	const navList = ref([
		{
			name: "Home",
			path: "/",
		},
		{
			name: "About Us",
			path: "/about-us",
		},
		{
			name: "Our Solutions",
			children: [
				{
					name: "AiDA 3.1",
					path: "/aida",
				},
				{
					name: "Mixi",
					path: "/mixi",
				},
			],
		},
		{
			name: "Communities",
			children: [
				{
					name: "Events",
					path: "/events",
				},
				{
					name: "User Stories",
					path: "/user-stories",
				},
				{
					name: "Help Centre",
					path: "/help-centre",
				},
			],
		},
		{
			name: "Media",
			path: "/media",
		},
		{
			name: "Contact Us",
			path: "/contact-us",
		},
	]);
</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 {
				position: relative;
				> .link {
					margin: 0 14px;
					color: #fff;
					font-size: 15px;
					text-decoration: none;
					line-height: 37px;
					display: inline-block;
					position: relative;
					cursor: pointer;
					&::before {
						content: "";
						position: absolute;
						height: 2px;
						width: 0;
						right: 0;
						left: auto;
						bottom: 0;
						transition: width 0.2s ease-in-out;
						-webkit-transition: width 0.2s ease-in-out;
						background-color: #fff;
					}
					&:hover::before {
						width: 100%;
						left: 0;
						right: auto;
					}
					&.router-link-exact-active:before {
						width: 100%;
					}
				}
				> .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;
			> span {
				margin: 0 14px;
				color: #fff;
				font-size: 15px;
				text-decoration: none;
				line-height: 37px;
				display: inline-block;
				position: relative;
			}
		}
	}
</style>