<script setup lang="ts">
import { RouterLink } from "vue-router";
import router from "@/router";
</script>

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

<style lang="scss">
.nav {
  overflow: auto;

  &__list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: var(--navigation-justify-content);
    align-items: center;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style-type: none;

    overflow: auto;
  }

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

  &__link {
    display: block;
    font-weight: bold;
    line-height: 1;
    color: var(--color-text);
    margin-bottom: 0.375em;
    text-decoration: none;
    text-transform: capitalize;

    &.router-link-exact-active {
      color: var(--color-text);
    }
  }

  &__link:hover ~ &__underline,
  &__link.router-link-exact-active ~ &__underline {
    &:before,
    &:after {
      width: 50%;
      background-color: var(--color-text);
    }
  }

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

    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: 0;

      width: 0;
      height: 0.125rem;

      transition: all 0.2s ease-in-out;
    }

    &:before {
      left: 50%;
    }

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