components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        header {
          background: rgba(0, 0, 0, 0.95);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid #374151;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 50;
        }
        
        nav {
          max-width: 1280px;
          margin: 0 auto;
          padding: 1rem 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.5rem;
          font-weight: bold;
          color: white;
          text-decoration: none;
          transition: color 0.3s;
        }
        .logo-img {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          object-fit: contain;
        }
.logo:hover {
          color: #ef4444;
        }
        
        .nav-links {
          display: flex;
          gap: 2rem;
          align-items: center;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        
        .nav-links a {
          color: #9ca3af;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.3s;
          position: relative;
        }
        
        .nav-links a:hover {
          color: white;
        }
        
        .nav-links a.active {
          color: #ef4444;
        }
        
        .nav-links a.active::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          right: 0;
          height: 2px;
          background: #ef4444;
        }
        
        .mobile-menu-btn {
          display: none;
          background: none;
          border: none;
          color: white;
          cursor: pointer;
          padding: 0.5rem;
        }
        
        @media (max-width: 768px) {
          .nav-links {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.98);
            flex-direction: column;
            padding: 1rem 2rem;
            border-bottom: 1px solid #374151;
            gap: 1rem;
          }
          
          .nav-links.mobile-open {
            display: flex;
          }
          
          .mobile-menu-btn {
            display: block;
          }
        }
      </style>
      <header>
        <nav>
          <a href="/" class="logo">
            <img src="https://huggingface.co/dodey917/wear-fun/resolve/main/images/KZr0gBp.png" alt="Wear.Fun Logo" class="logo-img">
            <span>Wear.Fun</span>
            <span style="color: #ef4444;">🚀</span>
          </a>
<ul class="nav-links" id="navLinks">
            <li><a href="/" class="nav-link">Home</a></li>
            <li><a href="/meme.html" class="nav-link">Create</a></li>
            <li><a href="/shop.html" class="nav-link">Shop</a></li>
            <li><a href="/about.html" class="nav-link">About</a></li>
          </ul>
          
          <button class="mobile-menu-btn" id="mobileMenuBtn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <line x1="3" y1="12" x2="21" y2="12"></line>
              <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
          </button>
        </nav>
      </header>
    `;
    
    // Mobile menu toggle
    const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
    const navLinks = this.shadowRoot.getElementById('navLinks');
    
    mobileMenuBtn.addEventListener('click', () => {
      navLinks.classList.toggle('mobile-open');
    });
    
    // Set active link based on current page
    const currentPath = window.location.pathname;
    const navLinksElements = this.shadowRoot.querySelectorAll('.nav-link');
    
    navLinksElements.forEach(link => {
      const href = link.getAttribute('href');
      if ((currentPath === '/' && href === '/') || 
          (currentPath !== '/' && href === currentPath) ||
          (currentPath.endsWith(href) && href !== '/')) {
        link.classList.add('active');
      }
    });
  }
}

customElements.define('custom-header', CustomHeader);