---
// Image imports
import logo from "../images/logo.png";
// Components---
import OutlineButton from "../components/buttons/OutlineButton.astro";
---

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

  <!-- Logo -->
  <div>
    <a href="/">
        <img src={logo} alt="Logo" class="mt-4 mb-2 h-14  " /> 
    </a>


  </div>

  <!-- Desktop Pages -->
  <div class="flex flex-row max-md:hidden my-auto mr-4 mt-8 text-sm space-x-6 ">
    
    <div class="text-xl font-mono space-x-24 max-lg:space-x-12 text-slate-300  duration-500 max-md:space-x-4  object-cover">
      
      <a href="/team"  class="hover:text-gray-400"><slot name="team">TEAM</slot></a>
      <a href="/olympian"  class="hover:text-gray-400 font-bold"><slot name="olympian">O L Y M P I A N</slot></a>
      <a href="/contact"  class="hover:text-gray-400"><slot name="contact">CONTACT</slot></a>
      
    </div>  
    
  </div>
  
<!-- Button -->
    <div class="link mt-6">
      
        <OutlineButton text="Donate" link="/" />
        
    </a>
</div>
  
  <!-- Hamburger button -->
  <button type="button" id='burg' class="mt-5 block text-gray-500 hover:text-white focus:text-white focus:outline-none  visible md:hidden">
    <svg class="h-8 w-8 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">Team</a>
    <a href="/" class=" hover:bg-slate-700 rounded">Olympian </a>
    <a href="/" class=" hover:bg-slate-700 rounded">Contact</a>
    <a href="/" class="">  
      <button class="outline outline-purple-400  px-2 rounded-md
      shadow-lg   text-white font-mono font-bold text-xl hover:bg-slate-100 hover:text-purple-400 hover:shadow-purple-600  transition-all duration-300">Donate</button></a>
    
     

  </div>


</div>
</header>



<!-- Scripts -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Hamburger menu
    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');
      });
    });
  });


  // Remove mobile menu once screen size goes back to desktop
  window.addEventListener('resize', () => {
    if (window.innerWidth > 640) {
      links.classList.add('hidden');
    }
  });
  // Also change the icon back
  window.addEventListener('resize', () => {
    if (window.innerWidth > 640) {
      ham.classList.remove('hidden');
    }
  });
  window.addEventListener('resize', () => {
    if (window.innerWidth > 640) {
      x.classList.add('hidden');
    }
  });
  


  

</script>