<template>
  <nav class="layout-extra-links">
    <!-- active-class указывает на базовый класс, а не на '': пустую строку NuxtLink считает
         falsy и подставляет дефолты router-link-active, а они зависят от текущего роута и
         ломают гидрацию лениво гидрируемого футера. Дубль класса Vue схлопывает. -->
    <NuxtLink
      v-for="(item, index) in additionalLinksItems"
      :key="`s-additional-link-${index}`"
      :to="generateLink(item.name)"
      active-class="layout-extra-links__link"
      exact-active-class="layout-extra-links__link"
      class="layout-extra-links__link"
      @click="emit('close')"
    >{{ $t(`additional_link.${item.title}`) }}</NuxtLink>
  </nav>
</template>

<script setup lang="ts">
import { additionalLinksItems } from '../../lib';

const emit = defineEmits<{
  (eventName: 'close',): void;
}>();

const { generateLink } = useGenerateLink();
</script>

<style lang="scss">
.layout-extra-links {
  text-align: center;
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.layout-extra-links__link {
  @include font-sm;

  display: grid;
  grid-auto-flow: column;
  column-gap: 8px;
  align-items: center;
  color: $additional-links-text;

  &:not(:last-child)::after {
    content: ' - ';
    color: $additional-links-separator;
  }

  @include hover(color) {
    color: $additional-links-text--hover;
  }
}

.layout-extra-links__link::after {
  @include from-br(sm) {
    color: $additional-links-separator;
  }
}
</style>
