<div class="side-menu" id="side-menu">
  <div class="side-menu-header">
    <div class="side-menu-header-left">
      <div class="side-menu-close" onclick="toggleSideMenu()">
        <i class="fal fa-times"></i>
      </div>
      <div class="side-menu-logo">
        <img class="side-menu-logo-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/emblem.png" alt="logo">
      </div>
    </div>
    {% if current_person.signed_in? %}
      {% if current_school.sso_active? %}
        <div class="side-menu-login">
          {{ current_person.name }}
        </div>
      {% else %}
        <a class="side-menu-login" href="/app/account">
          {{ current_person.name }}
        </a>
      {% endif %}
    {% else %}
      <a class="side-menu-login" href="/learners/sign_in">
        <span class="lang-en">Log in</span>
        <span class="lang-de">Einloggen</span>
        <span class="lang-es">Conectarse</span>
        <span class="lang-fr">Connexion</span>
        <span class="lang-br">Entrar</span>
      </a>
    {% endif %}
  </div>
  <div class="side-menu-body">
    <div class="side-menu-language">
      <i class="fal fa-globe"></i>
      <span class="lang-en">English</span>
      <span class="lang-de">Deutsch</span>
      <span class="lang-es">Español</span>
      <span class="lang-fr">Français</span>
      <span class="lang-br">Português (BR)</span>
      
      <div class="side-menu-language-dropdown">
        <div data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang'))">English</div>
        <div data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</div>
        <div data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang'))">Español</div>
        <div data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang'))">Français</div>
        <div data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang'))">Português (BR)</div>
      </div>
    </div>

    <div class="side-menu-link">
      <a href="/app/catalog" id="side-menu-courses">
        <span class="lang-en">Academy Courses</span>
        <span class="lang-de">Academy-Kurse</span>
        <span class="lang-es">Cursos de la Academia</span>
        <span class="lang-fr">Cours de l'Académie</span>
        <span class="lang-br">Cursos da Academia</span>
      </a>
    </div>
    <div class="side-menu-link">
      <a href="/app/video-tutorials" id="side-menu-tutorials">
        <span class="lang-en">Video Tutorials</span>
        <span class="lang-de">Video-Tutorials</span>
        <span class="lang-es">Tutoriales en vídeo</span>
        <span class="lang-fr">Tutoriels vidéo</span>
        <span class="lang-br">Tutoriais</span>
      </a>
    </div>
    <div class="side-menu-link">
      <a href="https://www.pipedrive.com/en/webinars" target="_blank" id="side-menu-webinars">
        <span class="lang-en">Webinars</span>
        <span class="lang-de">Webinare</span>
        <span class="lang-es">Seminarios en línea</span>
        <span class="lang-fr">Webinaires</span>
        <span class="lang-br">Webinars</span>
      </a>
    </div>
  </div>
</div>

<style>
  .side-menu {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: #fff;
    z-index: 100;
    left: -100vw;
    transition: left 0.1s;
    visibility: hidden;
    padding: 20px;
  }
  .side-menu-open {
    visibility: visible;
    left: 0;
    transition: left 0.1s;
  }
  .side-menu-header {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
  }
  .side-menu-header-left {
    display: flex;
  }
  .side-menu-close {
    font-size:28px;
    cursor: pointer;
  }
  .side-menu-logo {
    margin-left: 20px;
    display: flex;
  }
  .side-menu-logo-image {
    margin-top: auto;
  }
  .side-menu-language {
    padding: 4px 22px;
    border: 2px solid #E4E6E9;
    border-radius: 4px;
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
  }
  .side-menu-language-dropdown {
    position: absolute;
    background-color: #fff;
    width: calc(100% + 40px);
    top: 46px;
    left: -20px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, .08), 0px 0px 4px rgba(0,0,0,.12);
  }
  .side-menu-language > span {
      cursor: pointer;
  }
  .side-menu-language-dropdown.show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
  }
  .side-menu-language-dropdown div[data-lang] {
    padding: 4px 20px;
    font-size:16px;
  }

  .side-menu-language-dropdown div[data-lang].current-lang {
    background-color: #f4f5f6;
  }
  .side-menu-link {
    margin-bottom: 20px;
    background: #F7F7FE;
    border-radius: 4px;
  }
  .side-menu-link > a {
    padding: 20px;
    display: block;
  }
  .side-menu-link > a:hover span,
  .side-menu-link > a:focus span {
    border-bottom: 2px solid #08A742;
  }
  .side-menu-link-active span {
    border-bottom: 2px solid #08A742;
  }
</style>

<script>
  function toggleSideMenu() {
    let sideMenu = document.querySelector('#side-menu');
    if (sideMenu.classList.contains('side-menu-open')) {
      window.onscroll = function() {};
    } else {
      window.onscroll = function () { window.scrollTo(0, 0); };
    }
    sideMenu.classList.toggle('side-menu-open');
  }
  
  document.querySelector(".side-menu-language").addEventListener('click', () => {
    document.querySelector('.side-menu-language-dropdown').classList.toggle('show');
  });
</script>
