<div class="side-menu-wrapper np-hidden tablet-visible" id="side-menu">
  <div class="side-menu">
      <div class="side-menu-header">
        {% if current_person.signed_in? %}
          <div class="side-menu-header-logged">
            <a class="side-menu-header-name" href="">
              {{ current_person.name }}
            </a>
            <img class="side-menu-header-image" src="{{current_person.avatar_url}}">
          </div>
        {% else %}
          <div class="side-menu-header-not-logged">
            <a class="side-menu-login" href="">
              Log in
            </a>
            <a class="side-menu-login" href="">
              Sign up
            </a>
          </div>
        {% endif %}
      </div>
      <div class="side-menu-body-wrapper" id="side-menu-body">
        <ul class="side-menu-body">
          <li class="side-menu-body-element-strong"><a href="{% route home %}">
            Home
            {% comment %}<i class="fal fa-angle-right side-menu-body-arrow"></i>{% endcomment %}
          </li>
          <li class="side-menu-body-element-strong"><a href="{% route courses %}">
            Courses
            {% comment %}<i class="fal fa-angle-right side-menu-body-arrow"></i>{% endcomment %}
          </li>
          {% comment %} <li class="side-menu-body-element-strong">
            Events
            <i class="fal fa-angle-right side-menu-body-arrow"></i>
          </li>
          <li class="side-menu-body-element-strong">
            Blog
            <i class="fal fa-angle-right side-menu-body-arrow"></i>
          </li>
          <li class="side-menu-body-element-strong">
            Pages
            <i class="fal fa-angle-right side-menu-body-arrow"></i>
          </li>{% endcomment %}
          <li class="side-menu-body-element-strong">
            <a target="_blank" href="https://www.quantuvos.com/contact">
              Contact
            </a>
          </li>
        </ul>
      </div>
    <div class="side-menu-footer">
      <div class="side-menu-footer-top">
        Call Us<br>800 388 80 90
      </div>
      <div class="side-menu-footer-mid">
        info@quantuvos.com
      </div>
      <div class="side-menu-footer-bottom">
        {% for social in website_footer.social_media_links %}
        <a class="side-menu-footer-social" href="{{ social.link }}">
          <i class="fab fa-{{ social.name }}"></i>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
<div class="np-hidden" id="side-menu-close-button" onclick="toggleSideMenu()">
  <i class="fal fa-times" style="margin: auto;"></i>
</div>
<style>
  .side-menu-wrapper {
    width: 50%;
    max-width: 700px;
    background: white;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    height: 100vh;
  }
  .side-menu {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
  }
  .side-menu-header {
    border-bottom: 1px solid #ededed;
    padding-bottom: 16px;
  }
  .side-menu-header-logged {
    display: flex;
    justify-content: end;
    color: rgb(86, 49, 80);
  }
  .side-menu-header-image {
    height: 42px;
    width: auto;
    border-radius: 50%;
  }
  .side-menu-header-name {
    align-self: center;
    margin-right: 32px;
    color: #563150;
  }
  .side-menu-body-wrapper {
    overflow-y: scroll;
    flex: 1;
  }
  .side-menu-body {
    list-style: none;
    padding: 0;
  }
  .side-menu-body-element, .side-menu-body-element-strong {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    color: rgb(86, 49, 80);
  }
  .side-menu-body-element-strong {
    margin: 20px;
  }
  .side-menu-body-arrow {
    margin: auto 0;
    font-size: 1.5rem;
  }
  .side-menu-body-return {
    color: rgb(86, 49, 80);
    padding: 12px 20px 12px 0;
    border-radius: 8px;
    background: rgb(244, 241, 254);
    margin-top: 10px;
  }
  .side-menu-body-return .fa-chevron-left {
    margin-left: 20px;
    margin-right: 10px;
  }
  .side-menu-body-element {
    font-size: 0.9rem;
    font-weight: 400;
    margin: 10px 20px;
  }

  .side-menu-footer {
    border-top: 1px solid #ededed;
    flex: 0 0 auto;
  }
  .side-menu-footer-top {
    font-size: 1.1rem;
    color: rgb(86, 49, 80);
    font-weight: 500;
    margin-top: 12px;
  }
  .side-menu-footer-mid {
    color: rgb(79, 84, 123);
    font-size: 0.9rem;
    padding: 20px 0;
  }
  .side-menu-footer-bottom {
    color: rgb(79, 84, 123);
    font-weight: 400;
  }
  .side-menu-footer-social {
    margin: auto 10px;
  }
  .side-menu-footer-social:first-child {
    margin-left: 0;
  }
  .side-menu-footer-social:last-child {
    margin-right: 0;
  }
  #side-menu-close-button {
    color: black;
    background-color: white;
    position: absolute;
    right: 2%;
    top: 2%;
    z-index: 101;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 500;
    width: 42px;
    height: 42px;
    display: flex;
  }
  @media only screen and (max-width: 768px) {
    .side-menu {
      min-width: 360px;
    }
  }
  @media only screen and (max-width: 450px) {
    .side-menu {
      width: calc(100vw - 50px) !important;
      min-width: 0;
    }
    #side-menu-close-button {
      right: 4px;
    }
  }
</style>

<script>
  addEventListener('resize', function() {
    if (window.innerWidth > 1200 && menuOpen) {
      toggleSideMenu()
    }
  })
  var menuOpen = false

  function toggleSideMenu() {
    document.getElementById('side-menu').classList.toggle('np-hidden');
    document.getElementById('gray-background').classList.toggle('np-hidden');
    document.getElementById('side-menu-close-button').classList.toggle('np-hidden');
    if (menuOpen) {
      window.onscroll = function() {}
    } else {
      window.onscroll = function () { window.scrollTo(0, 0); };
    }
    menuOpen = !menuOpen
  }
</script>

<script>
  function changeSideMenuBody(name) {
    document.getElementById('side-menu-body').innerHTML = sideMenuBodies[name]
  }
  let sideMenuBodies = {};
  sideMenuBodies.main = `
    <ul class="side-menu-body">
      <li class="side-menu-body-element-strong" onclick="changeSideMenuBody('home')">
        Home
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
      <li class="side-menu-body-element-strong" onclick="changeSideMenuBody('courses')">
        Courses
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
      <li class="side-menu-body-element-strong">
        Events
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
      <li class="side-menu-body-element-strong">
        Blog
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
      <li class="side-menu-body-element-strong">
        Pages
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
      <li class="side-menu-body-element-strong">
        <a target="_blank" href="https://www.quantuvos.com/contact">
          Contact
        </a>
      </li>
    </ul>`
  sideMenuBodies.home = `
    <ul class="side-menu-body">
      <li class="side-menu-body-return" onclick="changeSideMenuBody('main')">
        <i class="far fa-chevron-left"></i> Home
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 1
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 2
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 3
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 4
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 5
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 6
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 7
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 8
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 9
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Home 10
        </a>
      </li>
    </ul>`
  sideMenuBodies.courses = `
    <ul class="side-menu-body">
      <li class="side-menu-body-return" onclick="changeSideMenuBody('main')">
        <i class="far fa-chevron-left"></i> Courses
      </li>
      <li class="side-menu-body-element" onclick="changeSideMenuBody('courses1')">
        Course List Layouts
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
      <li class="side-menu-body-element" onclick="changeSideMenuBody('courses2')">
        Course Single Layouts
        <i class="fal fa-angle-right side-menu-body-arrow"></i>
      </li>
    </ul>`
  sideMenuBodies.courses1 = `
    <ul class="side-menu-body">
      <li class="side-menu-body-return" onclick="changeSideMenuBody('courses')">
        <i class="far fa-chevron-left"></i> Course List Layouts
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Course List v1
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Course List v2
        </a>
      </li>
    </ul>`
  sideMenuBodies.courses2 = `
    <ul class="side-menu-body">
      <li class="side-menu-body-return" onclick="changeSideMenuBody('courses')">
        <i class="far fa-chevron-left"></i> Course Single Layouts
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Course Single v1
        </a>
      </li>
      <li class="side-menu-body-element">
        <a href="">
          Course Single v2
        </a>
      </li>
    </ul>`
</script>
