<div class="header-desktop-menu tablet-hidden">
  <ul class="header-desktop-menu-list">

    {% comment %} 
    -- Comment from Norm:
    This was the original menu layout with dropdowns as per their styling needs. 
    Last minute there were changes, so I edited the block below and saved this 
    for when they revert. Be sure to uncomment the script at the bottom too. 

    <li class="header-desktop-menu-item" dropdown-show="home">
      Home <i class="far fa-angle-down"></i>
    </li>
    <li class="header-desktop-menu-item" dropdown-show="home">
      Home <i class="far fa-angle-down"></i>
    </li>
    <li class="header-desktop-menu-item" dropdown-show="courses">
      Courses <i class="far fa-angle-down"></i>
    </li>
    <li class="header-desktop-menu-item" dropdown-show="events">
      Events <i class="far fa-angle-down"></i>
    </li>
    <li class="header-desktop-menu-item" dropdown-show="blog">
      Blog <i class="far fa-angle-down"></i>
    </li>
    <li class="header-desktop-menu-item" dropdown-show="pages">
      Pages <i class="far fa-angle-down"></i>
    </li>
    <li class="header-desktop-menu-link">
      <a href="">
        Contact
      </a>
    </li>
    {% endcomment %}

    <li class="header-desktop-menu-item">
      <a href="https://www.quantuvos.com">
      Home
    </li>
    <li class="header-desktop-menu-item" dropdown-show="courses">
      <a href="https://www.quantuvos.com">
      Courses
    </li>
    <li class="header-desktop-menu-link">
      <a href="https://www.quantuvos.com">
        Contact
      </a>
    </li>
  </ul>
</div>

<style>
  .header-desktop-menu-list {
    list-style: none;
    display: flex;
    margin: auto;
  }
  .header-desktop-menu-item, .header-desktop-menu-link {
    display: flex;
    margin: 0 10px;
    color: white;
  }
  .header-desktop-menu-item .fa-angle-down {
    margin: auto 0 auto 5px;
  }
  #header-desktop-dropdown {
    position: fixed;
    z-index: 50;
  }
  .header-desktop-dropdown-list {
    list-style: none;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 25px 70px 0 #01213a12;
    margin-bottom: 0;
    min-width: 230px;
  }
  .header-desktop-dropdown-item {
    padding: 3px 0;
    margin: 3px auto;
  }
</style>

{% comment %}
<script>
  window.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.header-desktop-menu-item[dropdown-show]').forEach(element => {
      element.addEventListener('click', function() {
        toggleMenuDropdown(element.getAttribute('dropdown-show'))
      })
    })
  })

  var openMenuDropdown = '';

  function toggleMenuDropdown(name) {
    let dropdown = document.getElementById('header-desktop-dropdown');
    if (openMenuDropdown == name || !name) {
      dropdown.classList.add('np-hidden');
      openMenuDropdown = '';
    }
    else {
      openMenuDropdown = name;
      dropdown.innerHTML = menuDropdowns[name];
      if (openMenuDropdown) {
        dropdown.classList.remove('np-hidden');
      }
      repositionMenuDropdown();
    }
  }

  function repositionMenuDropdown() {
    let dropdown = document.getElementById('header-desktop-dropdown');
    let parentButton = document.querySelector(`.header-desktop-menu-item[dropdown-show="${openMenuDropdown}"]`)
    let buttonPosition = parentButton.getBoundingClientRect();
    dropdown.style.top = `${buttonPosition.bottom + 15}px`;
    dropdown.style.left = `${buttonPosition.left}px`;
  }

  document.addEventListener('click', function(event) {
    if (openMenuDropdown &&
      !document.querySelector('.header-desktop-menu').contains(event.target) &&
      !document.getElementById('header-desktop-dropdown').contains(event.target)
    ) {
      toggleMenuDropdown()
    }
  })

  addEventListener('resize', function() {
    if (openMenuDropdown) {
      if (window.innerWidth <= 1200 ) {
        document.getElementById('header-desktop-dropdown').classList.add('np-hidden');
        openMenuDropdown = '';
      }
      else {
        repositionMenuDropdown();
      }
    }
  });

  menuDropdowns = {};
  menuDropdowns.home = `
  <ul class="header-desktop-dropdown-list">
    <li class="header-desktop-dropdown-item">
      Home 1
    </li>
    <li class="header-desktop-dropdown-item">
      Home 2
    </li>
    <li class="header-desktop-dropdown-item">
      Home 3
    </li>
    <li class="header-desktop-dropdown-item">
      Home 4
    </li>
    <li class="header-desktop-dropdown-item">
      Home 5
    </li>
    <li class="header-desktop-dropdown-item">
      Home 6
    </li>
  </ul>`
  menuDropdowns.courses = `
  <ul class="header-desktop-dropdown-list">
    <li class="header-desktop-dropdown-item">
      Course 1
    </li>
    <li class="header-desktop-dropdown-item">
      Course 2
    </li>
    <li class="header-desktop-dropdown-item">
      Course 3
    </li>
    <li class="header-desktop-dropdown-item">
      Course 4
    </li>
    <li class="header-desktop-dropdown-item">
      Course 5
    </li>
    <li class="header-desktop-dropdown-item">
      Course 6
    </li>
  </ul>`
</script>
{% endcomment %}
