---
import t from "../i18n/es.json";
---

<header>
  <a href="/">{t.header.home}</a>
  <a href="/trajectory">{t.header.trajectory}</a>
  <a href="/portfolio">{t.header.portfolio}</a>
  <a href="/blog">{t.header.blog}</a>
  <a href="/contact">{t.header.contact}</a>
</header>

<style lang="scss">
  @use "../../styles/variables" as *;

  header {
    color: $accent;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;

    padding: 2rem;

    a {
      text-decoration: none;
      font-weight: 700;
      font-size: 1.2rem;
      text-transform: uppercase;
      transition:
        color 0.2s ease-in-out,
        border-bottom-color 0.2s ease-in-out;
      color: $accent;
      line-height: 1;
      border-bottom: 2px solid transparent;

      &:hover {
        color: $accentDark;
        border-bottom-color: currentColor;
      }

      &.active {
        color: $accentDark;
      }
    }
  }

  @media (max-width: $breakpointTablet) {
  }

  @media (min-width: $breakpointTablet) {
  }

  @media (min-width: $breakpointDesktop) {
  }
</style>