Bauhaus Jewel Tone 내비게이션

<nav class="bg-emerald-600 dark:bg-sapphire-900 p-4 shadow-lg">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center mb-4 md:mb-0">
      <div class="w-8 h-8 bg-ruby-500 dark:bg-ruby-700 mr-2 transform rotate-45"></div>
      <a href="#" class="text-white text-2xl font-bold tracking-widest uppercase">Reserv<span class="text-ruby-300 dark:text-ruby-500">.</span></a>
    </div>

    <!-- Navigation Links -->
    <div class="relative flex flex-col md:flex-row items-center w-full md:w-auto">
      <!-- Mobile Menu Button (Hamburger) -->
      <button id="navbar-toggle" class="md:hidden absolute top-0 right-0 mr-4 text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-label="Toggle navigation">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>

      <ul id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0 w-full md:w-auto text-center md:text-left">
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            Services
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            About Us
          </a>
        </li>
      </ul>
    </div>

    <!-- Action Button -->
    <div class="mt-4 md:mt-0">
      <a href="#" class="inline-block px-6 py-2 bg-ruby-500 hover:bg-ruby-400 dark:bg-ruby-700 dark:hover:bg-ruby-600 text-white font-bold uppercase tracking-wider rounded-md transition duration-300 ease-in-out transform hover:scale-105 border-2 border-ruby-500 dark:border-ruby-700">
        Book Now
      </a>
    </div>
  </div>
  <script>
    // Simple JavaScript for mobile menu toggle
    document.addEventListener('DOMContentLoaded', function () {
      const navbarToggle = document.getElementById('navbar-toggle');
      const navbarMenu = document.getElementById('navbar-menu');

      navbarToggle.addEventListener('click', function () {
        navbarMenu.classList.toggle('hidden');
        navbarMenu.classList.toggle('flex');
        navbarMenu.classList.toggle('flex-col');
      });

      // Close menu when a link is clicked (for mobile)
      navbarMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          if (window.innerWidth < 768) { // md breakpoint
            navbarMenu.classList.add('hidden');
            navbarMenu.classList.remove('flex');
            navbarMenu.classList.remove('flex-col');
          }
        });
      });

      // Close menu on resize if above mobile breakpoint
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          navbarMenu.classList.remove('hidden');
          navbarMenu.classList.remove('flex');
          navbarMenu.classList.remove('flex-col');
        } else {
          navbarMenu.classList.add('hidden'); // Ensure it's hidden on mobile if resized from desktop
          navbarMenu.classList.remove('flex');
          navbarMenu.classList.remove('flex-col');
        }
      });
    });
  </script>
  <style>
    /* Custom tailwind color for dark mode (replace with actual tailwind.config.js extension) */
    .bg-sapphire-900 {
      background-color: #0A0A2A; /* Darker blue reminiscent of sapphire */
    }
    .text-sapphire-900 {
      color: #0A0A2A;
    }
    .bg-ruby-500 {
      background-color: #CC0033;
    }
    .hover\:bg-ruby-400:hover {
      background-color: #E6003D;
    }
    .dark\:bg-ruby-700 {
      background-color: #990022;
    }
    .dark\:hover\:bg-ruby-600:hover {
      background-color: #B30028;
    }
    .text-ruby-300 {
      color: #FF5C83;
    }
    .dark\:text-ruby-500 {
      color: #CC0033;
    }
    .hover\:text-ruby-300:hover {
      color: #FF5C83;
    }
    .dark\:hover\:text-ruby-500:hover {
      color: #CC0033;
    }
    .hover\:border-ruby-300:hover {
      border-color: #FF5C83;
    }
    .dark\:hover\:border-ruby-500:hover {
      border-color: #CC0033;
    }
    .border-ruby-500 {
      border-color: #CC0033;
    }
    .dark\:border-ruby-700 {
      border-color: #990022;
    }

    /* Primary Emerald for background */
    .bg-emerald-600 {
      background-color: #008060; 
    }
  </style>
</nav>