<template>
  <nav class="nav">
    <ul class="nav__list flex flex--row flex--nowrap flex--center-v">
      <li class="nav__item" v-for="(route, idx) in routes" :key="idx">
        <router-link class="nav__link" :to="route.path">
          {{ route.name }}
        </router-link>
        <div class="nav__underline"></div>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  props: {
    routes: {
      required: true,
      type: Array,
    },
  },
};
</script>

<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";

.nav {
  overflow: auto;

  &__list {
    margin: 0;
    padding: 0;

    list-style-type: none;

    z-index: 1;

    overflow: auto;
    width: 100%;

    @include mq-desktop {
      justify-content: center;
    }
  }

  &__item {
    padding: 0.375em;
    white-space: nowrap;
  }

  &__link {
    display: block;
    font-weight: bold;
    line-height: 1;
    color: $copy-color;
    margin-bottom: 0.375em;
    text-decoration: none;

    &.router-link-exact-active {
      color: #fff;
    }
  }

  &__link:hover ~ &__underline {
    &:before,
    &:after {
      width: 50%;
      background-color: $copy-color;
    }
  }

  &__link.router-link-exact-active ~ &__underline {
    &:before,
    &:after {
      width: 50%;
      background-color: #fff;
    }
  }

  &__underline {
    position: relative;
    display: block;
    width: 100%;

    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0.125em;
      bottom: 0;
      transition: all 0.2s ease-in-out;
    }

    &:before {
      left: 50%;
    }

    &:after {
      right: 50%;
    }
  }
}
</style>
