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

<template>
  <nav class="navigation">
    <div class="navigation__list">
      <RouterLink
        class="navigation__link"
        v-for="(route, idx) in router.options.routes"
        :key="idx"
        :to="route.path"
      >
        <component
          class="navigation__link-icon"
          :is="route.meta?.icon"
        ></component>
        <span class="navigation__link-text">
          {{ route.meta?.title }}
        </span>
      </RouterLink>
    </div>
  </nav>
</template>

<style lang="scss">
.navigation {
  position: fixed;
  top: var(--navigation-position-top);
  right: var(--navigation-position-right);
  bottom: var(--navigation-position-bottom);
  left: var(--navigation-position-left);
  overflow: hidden;

  width: var(--navigation-width);
  height: var(--navigation-height);

  background-color: var(--color-navigation-background);

  transition: 0.4s;
  z-index: 1;

  @media (hover: hover) {
    &:hover {
      width: var(--navigation-width-expanded);
    }

    &:hover &__link-text {
      display: var(--navigation-link-display-hover);
    }
  }

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

    width: 100%;
    height: 100%;
  }

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

    height: var(--navigation-link-height);

    padding: var(--navigation-link-padding);

    color: var(--color-router-link);
    box-shadow: none;

    &:hover {
      box-shadow: var(--navigation-link-box-shadow);

      svg {
        fill: var(--color-router-link-hover);
      }
    }

    &:hover &-text {
      color: var(--color-router-link-hover);
    }

    &:last-child {
      margin: var(--navigation-link-last-child-margin);
    }

    > * {
      flex: 1 0 0;
    }

    &.router-link-exact-active {
      color: var(--color-router-link-hover);
      background-color: var(--color-router-link);

      &:hover {
        color: var(--color-router-link-hover);
      }

      svg {
        fill: var(--color-router-link-hover);
      }
    }
  }

  &__link-icon {
    width: var(--navigation-link-icon-size);
    min-width: var(--navigation-link-icon-size);
    max-width: var(--navigation-link-icon-size);
    margin: 0 var(--navigation-link-icon-spacing);
    fill: var(--color-router-link);
  }

  &__link-text {
    display: none;
    font-size: var(--navigation-link-text-font-size);
    margin: 0 0 0 1rem;
    white-space: nowrap;
  }
}
</style>
