<template>
  <nav class="header-nav">
    <ul v-if="!loading" class="header-nav__list">
      <li class="header-nav__item" v-for="link in menuHeader" :key="link.url">
        <nuxt-link class="header-nav__link" :to="link.url">
          {{ link.title }}
        </nuxt-link>
      </li>
    </ul>
    <v-row v-else>
      <v-col v-for="n in 4" :key="n">
        <v-skeleton-loader class="mx-auto" type="button" width="60"></v-skeleton-loader>
      </v-col>
    </v-row>
  </nav>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return { 
     loading: true
    }
  },
  mounted() {
    this.loading = false
  },
  computed: {
    ...mapGetters({
      menuHeader: "modules/menu/menuHeader",
    }),
  },
};
</script>
