<template>
  <div class="nav">
    <div :class="`nav__wrapper nav__wrapper-${backgroundIndex}`">
      <div class="nav__container">
        <div class="nav__left"></div>
        <div class="nav__right">
          <div class="nav__item nav__brand">
            {{ this.$site.themeConfig.brand || window.location.hostname }}
          </div>
          <div class="nav__item" v-for="item in $site.themeConfig.nav" :key="item.link">
            <a v-if="item.link" :href="`${item.link}`">{{ item.text }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      backgroundIndex: 0,
    }
  },

  mounted() {
    this.decideNavBackground();
  },

  methods: {
    decideNavBackground() {
      if (this.$site.themeConfig.nav && this.$site.themeConfig.nav.length) {
        for (let i = 0; i < this.$site.themeConfig.nav.length; i++) {
          const activeRegexp = new RegExp('\^' + this.$site.themeConfig.nav[i].link + '$');
          if (activeRegexp.test(window.location.pathname)) {
            this.backgroundIndex = i;
            break;
          }
        }
      }
    }
  }
}
</script>


<style lang="scss" scoped>
@import './index.scss';
</style>