components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .nav-link {
          position: relative;
        }
        .nav-link:hover {
          color: #2563eb;
        }
        .nav-link:after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: -2px;
          left: 0;
          background-color: #2563eb;
          transition: width 0.3s ease;
        }
        .nav-link:hover:after {
          width: 100%;
        }
        .mobile-menu {
          transition: all 0.3s ease-out;
        }
      </style>
      <nav class="bg-white shadow-sm">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <a href="/" class="flex items-center">
              <i data-feather="navigation" class="text-blue-600 mr-2"></i>
              <span class="text-xl font-bold text-gray-800">Transfeero</span>
            </a>
            
            <!-- Desktop Navigation -->
            <div class="hidden md:flex items-center space-x-8">
              <a href="/" class="nav-link text-gray-700 hover:text-blue-600">Home</a>
              <a href="/services" class="nav-link text-gray-700 hover:text-blue-600">Services</a>
              <a href="/destinations" class="nav-link text-gray-700 hover:text-blue-600">Destinations</a>
              <a href="/about" class="nav-link text-gray-700 hover:text-blue-600">About</a>
              <a href="/contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a>
              <a href="/login" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition duration-300">Login</a>
            </div>
            
            <!-- Mobile menu button -->
            <div class="md:hidden">
              <button onclick="toggleMobileMenu()" class="text-gray-700 hover:text-blue-600 focus:outline-none">
                <i data-feather="menu"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white shadow-md">
          <div class="container mx-auto px-4 py-2">
            <a href="/" class="block py-2 text-gray-700 hover:text-blue-600">Home</a>
            <a href="/services" class="block py-2 text-gray-700 hover:text-blue-600">Services</a>
            <a href="/destinations" class="block py-2 text-gray-700 hover:text-blue-600">Destinations</a>
            <a href="/about" class="block py-2 text-gray-700 hover:text-blue-600">About</a>
            <a href="/contact" class="block py-2 text-gray-700 hover:text-blue-600">Contact</a>
            <a href="/login" class="block py-2 text-blue-600 hover:text-blue-700">Login</a>
          </div>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);