<template>
  <nav class="nav">
    <nuxt-link-locale
        class="nav__item"
        :class="[{ active: route.path.includes('settings') }]"
        to="/profile/settings"
    >
      <icon name="ic:baseline-settings" size="20" />
      {{ t('profile.settings.title') }}
    </nuxt-link-locale>
    <nuxt-link-locale
        class="nav__item"
        :class="[{ active: route.path.includes('orders') }]"
        to="/profile/orders"
    >
      <icon name="material-symbols:order-approve-rounded" size="20" />
      {{ t('profile.orders.title') }}
    </nuxt-link-locale>
    <nuxt-link-locale
        class="nav__item"
        :class="[{ active: route.path.includes('wishlist') }]"
        to="/profile/wishlist"
    >
      <icon name="mdi:cards-heart-outline" size="20" />
      {{ t('profile.wishlist.title') }}
    </nuxt-link-locale>
    <nuxt-link-locale
        class="nav__item"
        :class="[{ active: route.path.includes('cart') }]"
        to="/profile/cart"
    >
      <icon name="ph:shopping-cart-light" size="20" />
      {{ t('profile.cart.title') }}
    </nuxt-link-locale>
  </nav>
</template>

<script setup lang="ts">
const {t} = useI18n();
const route = useRoute();
</script>

<style lang="scss" scoped>
.nav {
  background-color: $white;
  border-radius: $default_border_radius;
  padding-block: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 141px;
  width: max-content;
  height: fit-content;

  &__item {
    cursor: pointer;
    padding: 5px 30px 5px 20px;
    border-left: 2px solid $white;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;

    color: $accent;
    font-weight: 600;

    @include hover {
      color: $accentDark;
    }

    &.active {
      border-color: $accent;
      color: $accentDark;
    }
  }
}
</style>