<!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=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<head>

<body>
  <!-- navbar goes here -->
  <div class="h-10 fixed top-0 inset-x-0 z-10">
    <nav class="bg-red-300">
      <div class="max-w-5xl mx-auto bg-red-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-red-900 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-red-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">RAM 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-red-900 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">About RAM</a>
              <a href="/illustrations" class="py-4 px-3 text-red-900 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">RAM Exhibits</a>
              <a href="/ram" class="py-4 px-3 text-red-900 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-500">Logo in HTML</a>
            </div>
          </div>
          <!-- secondary nav -->
          <div class="hidden md:flex flex items-center space-x-1">
            <a href="http://urbancruiseship.org/" class="py-4 px-3 text-red-900 hover:bg-gray-900 hover:text-gray-100 focus:bg-gray-900 focus:text-gray-100 transition duration-300">UCS Homepage</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="#872312">
                <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-red-400 border-b-2 border-red-300">
      <a href="/about" class="bg-red-200 block py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">About RAM</a>
      <a href="/illustrations" class="bg-red-200 block py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">RAM Exhibits</a>
      <a href="/ram" class="bg-red-200 block py-2 px-4 text-sm hover:bg-gray-900 hover:text-gray-100">Logo in HTML</a>
    </div>
  </div>
</body>

<script type="text/javascript">
  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");
  });
</script>
</html>
