<template>
  <div class="menu-bar">
    <template v-for="item in routerList">
      <template v-if="item.children.length">
        <div class="content">
          <div class="classify">{{ item.title }}</div>
          <div class="other-view" v-for="sItem in item.children">
            <template v-if="sItem.link.includes('http:') || sItem.link.includes('https:')">
              <a :href="sItem.link" target="_blank">{{ sItem.title }}</a>
            </template>
            <template v-else>
              <a :href="sItem.link" >{{ sItem.title }}</a>
            </template>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="other-view">
          <template v-if="item.link.includes('http:') || item.link.includes('https:')">
            <a :href="item.link">{{ item.title }}</a>
          </template>
          <template v-else>
            <a :href="item.link" >{{ item.title }}</a>
          </template>

        </div>
      </template>


    </template>
    <!--        <div class="other-view">
              <router-link to="/portfolio">Portfolio</router-link>
            </div>
            <div class="classify">Content</div>
            <div class="other-view">
              <router-link to="/research">Research</router-link>
            </div>
            <div class="other-view">
              <router-link to="/news">News & Events</router-link>
            </div>
            <div class="classify">Build</div>
            <div class="other-view">
              <router-link to="hackathon">Hackathon</router-link>
            </div>
            <div class="other-view margin-top">
              <router-link to="/jobs">Jobs</router-link>
            </div>
            <div class="other-view">
              <router-link to="/media">Media</router-link>
            </div>
            <div class="other-view">
              <router-link to="/about">About</router-link>
            </div>-->
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getNavData} from "../api/manage.js";
import {useStore} from "vuex";

const store = useStore();
const routerList = ref(store.getters.routerList)

const getNav = ()=>{
  getNavData().then(({data})=>{
    if (data) {
      routerList.value = data;
      store.commit('changeNavList', data)
    }
  })
}

onMounted(()=>{
  getNav()
})

</script>

<style lang="scss" scoped>

.menu-bar {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 45px 40px;

  .content {
    margin: 0.59259rem 0;
  }
  .other-view {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    text-align: right;
    color: #000000;
  }

  .classify {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 21px;
    text-align: right;
    color: #00000080;
    //margin-top: 32px;
  }
}
</style>
