<template>
  <div class="HeaderNav" :style="[props.HeaderNav]">
    <div class="HeaderNav-container">
        <nuxt-link :to="item.href" :class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
          v-for="item in props.navList" v-cloak :key="item.name">
          <span>{{ item.name }}</span>
        </nuxt-link>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  HeaderNav: Object,
  navList: Array
})
const route = useRouter()
const currentRoute = route.currentRoute.value.matched[0]['name']
const con = console
</script>

<style scoped src="~/assets/css/Header/nav.scss" lang="scss"></style>
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>