
<!-- https://www.youtube.com/watch?v=puaX_nhTMRU https://codepen.io/chris__sev/pen/QWGjQKe -->
<!-- https://www.youtube.com/watch?v=1hoSQhtd0IQ -->

<!-- navbar goes here -->
<div class="h-10 fixed top-0 inset-x-0 z-10 varela-round-font" id="navbar">
  <nav class="bg-gray-300">
    <div class="max-w-5xl mx-auto bg-gray-400 pr-2">
      <div class="flex justify-between text-lg">
        <div class="flex space-x-4">
          <!-- logo -->
          <div>
            <a href="/ucs" class="flex items-center py-4 px-4 text-gray-900 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100">
              <span class="font-bold">Home</span>
            </a>
          </div>
          <!-- primary nav -->
          <div class="flex hidden md:flex items-center space-x-1 text-gray-900">
            <a href="/ucs-about" class="py-4 px-3 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">About</a>
            <a href="/ucs-standards" class="py-4 px-3 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">Standards</a>
            <a href="/ucs-crew" class="py-4 px-3 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">Crew</a>
            <a href="/ucs-activities" class="py-4 px-3 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">Activities</a>
          </div>
        </div>
        <!-- secondary nav -->
        <div class="hidden md:flex items-center space-x-1">
          <a href="mailto:michael@urbancruiseship.org" class="py-4 px-3 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-300">Contact</a>
        </div>


        <!-- mobile button goes here -->
        <div class="md:hidden flex items-center">
          <button class="mobile-menu-button">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>

      </div>
    </div>
  </nav>


  <!-- mobile menu-->
  <div class="mobile-menu hidden md:hidden divide-y divide-gray-300 border-b-2 border-gray-300" id="mobile-dropdown">
    <a href="/ucs-about" class="bg-gray-200 block  focus:bg-gray-900 focus:text-gray-100 py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">About</a>
    <a href="/ucs-standards" class="bg-gray-200 block focus:bg-gray-900 focus:text-gray-100  py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Standards</a>
    <a href="/ucs-crew" class="bg-gray-200 block focus:bg-gray-900 focus:text-gray-100 py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Crew</a>
    <a href="/ucs-activities" class="bg-gray-200 block focus:bg-gray-900 focus:text-gray-100 py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Activities</a>
    <a href="mailto: michael@urbancruiseship.org" class="bg-gray-200 block focus:bg-gray-900 focus:text-gray-100 py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Contact</a>
  </div>
</div>

<!-- controlls the mobile dropdown menu-->
<script type="text/javascript">
  // this section toggles the mobile menu to appear and dissapear when the user pushes the hamburger button
  // sources:
  //   a.) https://www.youtube.com/watch?v=puaX_nhTMRU
  //   b.) https://codepen.io/chris__sev/pen/QWGjQKe

  // grab everything we need
  const btn = document.querySelector(".mobile-menu-button");
  const menu = document.querySelector(".mobile-menu");

  // add event listeners
  btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
  });


  // When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar
  // sources:
  //    a.) Simpler implementation of the code: https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
  //    b.) More complex version: https://stackoverflow.com/questions/56071897/hide-when-scroll-down-appears-when-scroll-up
  let prevScrollpos = window.pageYOffset;
  window.onscroll = function() {
    let currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navbar").style.top = "0";
      prevScrollpos = currentScrollPos;

    // if you set this "200" value to 0, you loose the delay effect
    } else if (currentScrollPos > prevScrollpos + 200){
      // the "-59px" below controlls how far up the navbar moves off the viewport when the user scrolls up
      document.getElementById("navbar").style.top = "-59px";

      // this section hides the mobile dropdown menu when the user scrolls down
      let mobileDropdown = document.getElementById("mobile-dropdown")
      if (!(mobileDropdown.classList.contains('hidden'))) {

        // the "-244px" below controlls how far up the navbar moves off the viewport when the user scrolls up...when the mobile dropdown menu is deployed
        document.getElementById("navbar").style.top = "-244px";
      }
      prevScrollpos = currentScrollPos;
    }
  }
</script>

<!-- causes the navbar to drop-down into view when the user clicks the "Tab" key -->
<!-- this is an accessability feature for people who cannot use a mouse properly -->
<script type="text/javascript">
  document.addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    // Number 9 is the "Tab" key on the keyboard
    if (event.keyCode === 9) {
      // this script is for accessability;
      // the user can "tab" and when the tabindex falls onto the navigation bar,
      // the navigation bar will drop-down into view
      document.getElementById("navbar").style.top = "0px";
    }
  });
</script>

<!-- How TO - Hide Menu on Scroll -->
<!-- https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp -->
<style media="screen">
  #navbar {
    transition: top 0.5s; /* Transition effect when sliding down (and up) */
  }
</style>
