components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .header {
          background: white;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          position: fixed;
          top: 0;
          left: 260px;
          right: 0;
          z-index: 90;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 1.5rem;
        }
        
        .search-container {
          flex: 1;
          max-width: 400px;
          position: relative;
        }
        
        .search-input {
          width: 100%;
          padding: 0.5rem 1rem 0.5rem 2.5rem;
          border: 1px solid #e2e8f0;
          border-radius: 0.375rem;
          font-size: 0.875rem;
          transition: all 0.2s ease;
        }
        
        .search-input:focus {
          outline: none;
          border-color: #3b82f6;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .search-icon {
          position: absolute;
          left: 0.75rem;
          top: 50%;
          transform: translateY(-50%);
          width: 1rem;
          height: 1rem;
          color: #94a3b8;
        }
        
        .header-actions {
          display: flex;
          align-items: center;
          gap: 1rem;
        }
        
        .action-button {
          background: none;
          border: none;
          color: #64748b;
          cursor: pointer;
          width: 2rem;
          height: 2rem;
          border-radius: 0.375rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
        }
        
        .action-button:hover {
          background: #f1f5f9;
          color: #334155;
        }
        
        .notification-badge {
          position: relative;
        }
        
        .badge-dot {
          position: absolute;
          top: 0;
          right: 0;
          width: 8px;
          height: 8px;
          background: #ef4444;
          border-radius: 9999px;
          border: 2px solid white;
        }
        
        .profile-container {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          cursor: pointer;
        }
        
        .profile-avatar {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 9999px;
          background: #3b82f6;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: 600;
          font-size: 0.875rem;
        }
        
        .profile-info {
          text-align: left;
        }
        
        .profile-name {
          font-weight: 600;
          font-size: 0.875rem;
          color: #1e293b;
        }
        
        .profile-role {
          font-size: 0.75rem;
          color: #64748b;
        }
        
        @media (max-width: 768px) {
          .header {
            left: 0;
          }
          
          .search-container {
            display: none;
          }
        }
      </style>
      
      <header class="header">
        <div class="search-container">
          <i data-feather="search" class="search-icon"></i>
          <input type="text" class="search-input" placeholder="Search...">
        </div>
        
        <div class="header-actions">
          <button class="action-button">
            <i data-feather="mail"></i>
          </button>
          <button class="action-button notification-badge">
            <i data-feather="bell"></i>
            <span class="badge-dot"></span>
          </button>
          <div class="profile-container">
            <div class="profile-avatar">AJ</div>
          <div class="profile-info">
              <div class="profile-name">Alex Johnson</div>
              <div class="profile-role">Administrateur</div>
            </div>
</div>
        </div>
      </header>
    `;
    
    // Initialize Feather icons in shadow DOM
    const featherScript = document.createElement('script');
    featherScript.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
    featherScript.onload = () => {
      if (this.shadowRoot) {
        window.feather && window.feather.replace();
      }
    };
    this.shadowRoot.appendChild(featherScript);
  }
}

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