---
// Navigation component
---

<header class="logo-container">
  <a href="/"><img src="/img/conjure-logo.svg" alt="Conjure Logo" /></a>
</header>

<nav class="menu">
  <input type="checkbox" class="menu-open" name="menu-open" id="menu-open" />
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger"></span>
    <span class="hamburger"></span>
    <span class="hamburger"></span>
  </label>
  <a href="#apropos" class="menu-item has-tooltip-text">
    <span>À propos</span>
    <img src="/img/icons/profile.png" alt="À Propos" />
  </a>
  <a href="#activites" class="menu-item has-tooltip-text">
    <span>Activitiés</span>
    <img src="/img/icons/medal.png" alt="Activitiés / Compétitions" />
  </a>
  <a href="#partenaires" class="menu-item has-tooltip-text">
    <span>Partenaires</span>
    <img src="/img/icons/sponsor.png" alt="Partenaires" />
  </a>
  <a href="https://instagram.com/conjure_ets/" target="_blank" rel="noopener noreferrer" class="menu-item">
    <div class="icon-centerer">
      <img src="/img/icons/instagram.svg" alt="Instagram" class="icon-32" />
    </div>
  </a>
  <a href="https://linkedin.com/company/conjure-ets" target="_blank" rel="noopener noreferrer" class="menu-item">
    <img src="/img/icons/linkedin.svg" alt="LinkedIn" />
  </a>
  <a href="https://conjure.itch.io" target="_blank" rel="noopener noreferrer" class="menu-item">
    <img src="/img/icons/itch-io.svg" alt="Itch.io" />
  </a>
  <a href="https://linktr.ee/conjureetsmtl" target="_blank" rel="noopener noreferrer" class="menu-item-always-open">
    <div class="icon-centerer">
      <img src="/img/icons/linktree.svg" alt="Linktree" class="icon-32" />
    </div>
  </a>
  <a href="mailto:conjure@ens.etsmtl.ca" class="menu-item-always-open">
    <img src="/img/icons/email.png" alt="Courriel" />
  </a>
</nav>