<div class="np-hidden" id="header-explore-dropdown">
  <ul class="header-explore-list">
    <li class="header-explore-item" onclick="expandExploreDropdown('architecture')">
      <span class="header-explore-item-text">
        Architecture
      </span>
      <i class="far fa-angle-right"></i>
    </li>
    <li class="header-explore-item" onclick="expandExploreDropdown('business')">
      <span class="header-explore-item-text">
        Business
      </span>
      <i class="far fa-angle-right"></i>
    </li>
    <li class="header-explore-item">
      <span class="header-explore-item-text">
        Computer Programming
      </span>
    </li>
    <li class="header-explore-item">
      <span class="header-explore-item-text">
        Data Analysis
      </span>
    </li>
    <li class="header-explore-item" onclick="expandExploreDropdown('design')">
      <span class="header-explore-item-text">
        Design
      </span>
      <i class="far fa-angle-right"></i>
    </li>
    <li class="header-explore-item">
      <span class="header-explore-item-text">
        Education
      </span>
    </li>
  </ul>
  <ul class="np-hidden" id="header-explore-extension"></ul>
</div>

<style>
  #header-explore-dropdown {
    position: fixed;
    z-index: 50;
    display: flex;
    background: white;
    border-radius: 8px;
    box-shadow: rgba(1, 33, 58, 0.07) 0px 25px 70px 0px;
    padding: 20px 0;

  }
  .header-explore-list {
    list-style: none;
    padding: 0 20px;
    margin-bottom: 0;
  }
  #header-explore-extension {
    list-style: none;
    margin-bottom: 0;
    padding: 0 20px;
  }
  .header-explore-item, .header-explore-extension-item {
    display: flex;
    justify-content: space-between;
    color: rgb(86, 49, 80);
    font-weight: 400;
    padding: 2px 0;
    margin: 4px 0;
  }
  .header-explore-item .fa-angle-right {
    margin-left: 10px;
    display: flex;
    margin: auto 0;
  }
  .header-explore-item-text {
    margin-right: 30px;
  }
</style>

<script>
  var exploreDropdownOpen = false
  var openExploreExtension = ''
  function toggleExploreDropdown() {
    let dropdownElement = document.getElementById('header-explore-dropdown');
    let dropdownExtension = document.getElementById('header-explore-extension');
    if (exploreDropdownOpen) {
      dropdownElement.classList.add('np-hidden');
      dropdownExtension.classList.add('np-hidden');
      openExploreExtension = '';
      exploreDropdownOpen = false;
    }
    else {
      repositionExplore()
      exploreDropdownOpen = true;
      document.getElementById('header-explore-dropdown').classList.remove('np-hidden');
    }
  }

  function expandExploreDropdown(name) {
    let dropdownExtension = document.getElementById('header-explore-extension');
    if (openExploreExtension == '') {
      dropdownExtension.classList.remove('np-hidden');
    }
    if (name != openExploreExtension) {
      dropdownExtension.innerHTML = exploreDropdowns[name];
      openExploreExtension = name;
    }
  }

  function repositionExplore() {
    let dropdown = document.getElementById('header-explore-dropdown');
    let parentButton = document.getElementById('header-explore-button')
    let buttonPosition = parentButton.getBoundingClientRect();
    dropdown.style.top = `${buttonPosition.bottom + 15}px`;
    dropdown.style.left = `${buttonPosition.left}px`;
  }

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

  document.addEventListener('click', function(event) {
    if (exploreDropdownOpen &&
      !document.getElementById('header-explore-dropdown').contains(event.target) &&
      !document.getElementById('header-explore-button').contains(event.target)
    ) {
      toggleExploreDropdown()
    }
  })

  exploreDropdowns = {};
  exploreDropdowns.architecture = `
    <li class="header-explore-extension-item">
      <a href="">
        Architecture
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Graphic Design
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Design Tool
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        User Experience Design
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Game Design
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        3D & Animation
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Fashion Design
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Interior Design
      </a>
    </li>`
  exploreDropdowns.business = `
    <li class="header-explore-extension-item">
      <a href="">
        Architecture 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Graphic Design 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Design Tool 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        User Experience Design 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Game Design 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        3D & Animation 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Fashion Design 2
      </a>
    </li>
    <li class="header-explore-extension-item">
      <a href="">
        Interior Design 2
      </a>
    </li>`
  exploreDropdowns.design = exploreDropdowns.architecture;
</script>