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

  <!-- all this JavaScript does is control the mobile-view  hamburger button -->
  <!-- since it is unique to the navbar, it is included in this .ejs file instead of being imported -->
  <!-- NOTE: Alpine.js should be used to rebuild this in the future -->
  <head>
    <!-- this is what prevents the hamburger icon from getting pushed off the viewport when text in the './views/layoutandpartials.ejs' is made bigger -->
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.8, minimum-scale=1.0">

  <head>

  <body>
    <!-- navbar goes here -->
    <div class="h-10 fixed top-0 inset-x-0 z-10" id="navbar">
      <nav class="bg-blue-300">
        <div class="max-w-5xl mx-auto bg-blue-400 pr-2">
          <div class="flex justify-between">
            <div class="flex space-x-4">
              <!-- logo -->
              <div>
                <a href="/" class="flex items-center py-4 px-4 text-gray-700 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100">
                  <svg class="h-6 w-6 mr-2 text-blue-900" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                  <span class="font-bold">Home</span>
                </a>
              </div>
              <!-- primary nav -->
              <div class="hidden md:flex flex items-center space-x-1">
                <a href="/about" class="py-4 px-3 text-gray-700 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">About</a>
                <a href="https://github.com/Richard-Burd/alpine-js-sandbox" class="py-4 px-3 text-gray-700 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">Git Repo</a>
                <a href="/ramhome" class="py-4 px-3 text-gray-700 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">RAM Homepage</a>
              </div>
            </div>
            <!-- secondary nav -->
            <div class="hidden md:flex flex items-center space-x-1">
              <a href="/ucs" class="py-4 px-3 text-gray-700 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-300">UCS Homepage</a>
              <a href="/partials/navbar" class="py-2 px-3 text-gray-700 hover:bg-yellow-900 hover:text-gray-100 focus:bg-yellow-900 focus:text-gray-100 bg-yellow-400 text-yellow-900 rounded transition duration-300">Get Navbar</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-light-blue-400 border-b-2 border-blue-300" id="mobile-dropdown">
        <a href="/about" class="bg-blue-200 block py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">About</a>
        <a href="https://github.com/Richard-Burd/alpine-js-sandbox" class="bg-blue-200 block py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Git Repo</a>
        <a href="/ramhome" class="bg-blue-200 block py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Ram Animation Logo</a>
      </div>
    </div>
  </body>

  <!-- 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
    console.log("This is the JavaScript inside the <script> tag inside the './partials/navbar.ejs file'")
    // 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){
        document.getElementById("navbar").style.top = "-55px";

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

          // if you set this "-166" value to 0, you loose the delay effect
          document.getElementById("navbar").style.top = "-166px";
        }
        prevScrollpos = currentScrollPos;
      }
    }
  </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>

</html>
