---
// Image imports
import logo from "../images/logo.png";
// Components
import NavLink from "./NavLink.astro";
---

<header class="h-auto bg-slate-800 ">
<div class=" flex flex-row justify-between">

  <!-- Logo -->
  <a href="/">
      <img src={logo} alt="Logo" class="my-2 mx-6 h-12 " /> 
  </a>

  <!-- Desktop Pages -->
  <div class="flex flex-row space-x-5 invisible sm:visible my-auto  ">

    <NavLink href="#" text="Home" />
    <NavLink href="#" text="Home" />
    <NavLink href="#" text="Home" />
    
    
  </div>
  
 
  
  
  <button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10">
    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
      <path id="ham" class="visible"  fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
      <path id="x" class="hidden"  fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>

    </svg>
  </button>
</div>

<!-- Mobile pages -->
  <div id="links" class="hidden ml-8 flex flex-col text-white font-semibold px-2 pt-1 pb-4 text-lg  space-y-1">
    <a href="#" class=" hover:bg-slate-700 rounded">Page 1</a>
    <a href="#" class=" hover:bg-slate-700 rounded">Page 2</a>
  </div>



  </div>



</header>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const hamburger = document.querySelector('#burg');
    const links = document.querySelector('#links');
    const navLinks = document.querySelectorAll('#links a');
    const ham = document.querySelector('#ham');
    const x = document.querySelector('#x');


    // Make hamburger into a x when clicked
    hamburger.addEventListener('click', () => {
      ham.classList.toggle('hidden');
    });
    
    hamburger.addEventListener('click', () => {
      x.classList.toggle('hidden');
    });

    hamburger.addEventListener('click', () => {
      links.classList.toggle('hidden');

      

    });

    navLinks.forEach(link => {
      link.addEventListener('click', () => {
        links.classList.toggle('hidden');
      });
    });
  });
</script>