{% load static %}

<div class="2xl:p-1 py-1 grid grid-cols-1 sm:grid-cols-[minmax(300px,_1fr)_3fr] gap-1 items-center bg-black fixed top-0 left-0 right-0 z-10 max-w-screen-2xl container mx-auto">

  <div id="mTobiasGerwin" class="py-4 text-center bg-petrol-500 h-full w-full text-white cursor-pointer">Tobias Gerwin</div>


  <button id="btnOpenMenu" class="sm:hidden absolute inset-y-0 right-2 text-white">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
      class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </button>

  <div id="menu" class="panel sm:py-2 sm:px-0 sm:space-y-0 space-y-4 text-center sm:bg-white bg-celeste-300 sm:h-full h-0 sm:w-full w-1/2 sm:flex sm:flex-row flex-col justify-around sm:relative absolute right-0">
    <a href="/projekte/"
      id="mProjekte" class="hover:bg-petrol-500 p-2 sm:mt-0 mt-4 transition hover:scale-105 hover:text-white cursor-pointer">
      Projekte
    </a>
    <div id="mUeberMich" class="hover:bg-petrol-500 p-2 transition hover:scale-105 hover:text-white cursor-pointer">
      Über mich
    </div>
    <div id="mKontakt" class="hover:bg-petrol-500 p-2 transition hover:scale-105 hover:text-white cursor-pointer">
      Kontakt
    </div>
  </div>

</div>

<script>
  document.getElementById("btnOpenMenu").addEventListener("click", toggleMenu);

  ['mTobiasGerwin', 'mUeberMich', 'mKontakt'].forEach(elId => {
    document.getElementById(elId).addEventListener("click", closeMenu);
    document.getElementById(elId).addEventListener("click", scrollPage);
  });

  function toggleMenu() {
    document.getElementById("menu").classList.toggle('expanded');
  }
  function closeMenu() {
    document.getElementById("menu").classList.remove('expanded');
  };

  function scrollPage(el) {

    let jp = {
      'mTobiasGerwin': 'TobiasGerwin',
      'mProjekte': 'projekte',
      'mUeberMich': 'ueberMich',
      'mKontakt': 'kontakt',
    }

    let targetBox = document.getElementById(jp[el.target.id])

    if (targetBox) {
      let htmlBox = document.getElementsByTagName('html')[0]
      htmlBox.scrollTop = targetBox.offsetTop
    } else {
      let a = document.createElement('a');
      a.href = '/#' + jp[el.target.id];
      a.click();
    }
    
  }


</script>