<nav id="nav">
  <a href="#hero" class="nav-logo">
    {{- with .Site.Params.logo -}}
      <img src="{{ . }}" alt="{{ $.Site.Params.handle }}" class="nav-logo-img">
    {{- end -}}
    <span class="nav-logo-text">{{ .Site.Params.handle }}<span class="nav-logo-tld">.me</span></span>
  </a>

  <div class="nav-right">
    <ul class="nav-links">
      <li><a href="#about">{{ i18n "nav_about" }}</a></li>
      <li><a href="#services">{{ i18n "nav_services" }}</a></li>
      <li><a href="#skills">{{ i18n "nav_skills" }}</a></li>
      <li><a href="#education">{{ i18n "nav_education" }}</a></li>
      <li><a href="#certifications">{{ i18n "nav_certs" }}</a></li>
      <li><a href="#projects">{{ i18n "nav_projects" }}</a></li>
      <li><a href="#contact">{{ i18n "nav_contact" }}</a></li>
      <li class="nav-theme-item">
        <button class="theme-toggle" aria-label="Toggle theme">
          <i class="fa-solid fa-sun"></i>
          <span class="theme-toggle-label"></span>
        </button>
      </li>
    </ul>

    <button class="theme-toggle theme-toggle--desktop" aria-label="Toggle theme">
      <i class="fa-solid fa-sun"></i>
    </button>

    <div class="lang-toggle" role="group" aria-label="Language">
      <span class="lang-btn active" title="{{ .Site.Language.LanguageName }}">
        <span class="fi fi-{{ .Site.Language.Params.flag }}"></span>
      </span>
      {{- range .Translations -}}
        <a href="{{ .RelPermalink }}" class="lang-btn" title="{{ .Language.LanguageName }}">
          <span class="fi fi-{{ .Language.Params.flag }}"></span>
        </a>
      {{- end -}}
    </div>

    <button class="hamburger" aria-label="Toggle menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>
