<header class=“header”>

<div class="container">
  <a href="{{ site.baseurl }}/" title="Acessar a home">
    <img
      src="{{ site.baseurl }}/assets/images/logo-veloe-blue.svg"
      alt="Veloe"
      class="header__brand"
    />
  </a>
  <a href="/#" class="header__menu-item" title="Menu">
    <img
      class="header__menu-item--open"
      src="{{ site.baseurl }}/assets/images/ic-menu.svg"
      alt="Veloe"
    />
    <img
      class="header__menu-item--close"
      src="{{ site.baseurl }}/assets/images/ic-close.svg"
      alt="Veloe"
    />
  </a>
  <ul class="header__list">
    <li class="header__item header__item--active">
      <a href="/" class="header__link" title="Página Inicial">Home</a>
    </li>
    <li class="header__item">
      <a href="API_URL/site/sobre" class="header__link" title="Sobre a Veloe"
        >Sobre nós</a
      >
    </li>
    <li class="header__item">
      <a
        href="API_URL/site/planos"
        class="header__link"
        title="Conheça os planos"
        >Planos</a
      >
    </li>
    <li class="header__item">
      <a href="API_URL/site/onde-usar" class="header__link" title="Onde Usar"
        >Onde Usar</a
      >
    </li>
    <li class="header__item">
      <a href="API_URL/ajuda" class="header__link" title="Ajuda">Ajuda</a>
    </li>
    <li class="header__item">
      <a
        href="URL_MINHA/conta/login"
        class="header__link minha-link"
        title="Ativar"
        >Ativar</a
      >
    </li>
    <div class="header__action-container">
      <li class="header__item header__item--with-border">
        <a href="API_URL/site/planos" class="header__link" title="Ativar"
          >Adquirir</a
        >
      </li>
      <li class="header__item header__item--btn">
        <a
          href="URL_MINHA/conta/login"
          class="header__link minha-link"
          title="Ativar"
          >Minha conta</a
        >
      </li>
    </div>
  </ul>
</div>

</header>

<script>

$(document).ready(function() {
  $(".header__menu-item").on("click", function(event) {
    event.preventDefault();
    if ($(".header__menu-item--open").is(":visible")) {
      $(".header__list").addClass("header__list--show");
      $(".header__menu-item--open").fadeOut(200, function() {
        $(".header__menu-item--close").fadeIn();
      });
    } else {
      $(".header__list").removeClass("header__list--show");
      $(".header__menu-item--close").fadeOut(200, function() {
        $(".header__menu-item--open").fadeIn();
      });
    }
  });
});

</script>

<script src=“{{ site.baseurl }}/assets/header.js”></script>