components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background-color: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(8px);
          border-bottom: 1px solid #FFE999;
        }
        
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            .hidden {
                display: none !important;
            }
            
            .mobile-menu {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                padding: 1rem;
                border-bottom: 1px solid #FFE999;
            }
            
            .mobile-menu a {
                padding: 0.75rem 0;
                border-bottom: 1px solid #FFE999;
            }
        }
.nav-link:hover {
          color: #FFC000;
        }
        .active {
          color: #FFC000;
          border-bottom: 2px solid #FFC000;
        }
</style>
      <header class="sticky top-0 z-50">
        <nav class="border-b border-noir-800 py-4 px-6">
          <div class="container mx-auto flex justify-between items-center">
            <a href="/" class="flex items-center space-x-2">
              <i data-feather="sun" class="text-sunshine-500 w-6 h-6"></i>
              <span class="text-xl font-bold text-sunshine-600">Sunshine Snap</span>
</a>
            
            <div class="hidden md:flex items-center space-x-8">
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200 active">Home</a>
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200">Gallery</a>
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200">Palettes</a>
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200">About</a>
            </div>
            <button class="md:hidden text-noir-300" id="mobileMenuButton">
              <i data-feather="menu" class="w-6 h-6"></i>
            </button>
            <div class="mobile-menu hidden" id="mobileMenu">
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200 active">Home</a>
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200">Gallery</a>
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200">Palettes</a>
              <a href="#" class="nav-link text-noir-300 hover:text-citrus-400 transition-colors duration-200">About</a>
            </div>
</div>
        </nav>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);