class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: var(--bg-panel-dark);
          border-radius: var(--radius);
          padding: 16px;
          border: 1px solid var(--border);
          box-shadow: var(--shadow);
        }
        
        .navbar-header {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px 0 16px;
          border-bottom: 1px solid var(--border);
          margin-bottom: 16px;
        }
        
        .brand-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: linear-gradient(135deg, #3B82F6, #10B981);
          box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
        }
        
        .brand-title {
          font-weight: 600;
          font-size: 16px;
          color: var(--text-light);
        }
        
        .nav-section {
          color: var(--text-muted);
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          padding: 12px 8px 4px;
        }
        
        .nav-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-radius: var(--radius-sm);
          cursor: pointer;
          margin-bottom: 4px;
          border: 1px solid transparent;
        }
        
        .nav-item:hover {
          background: rgba(255, 255, 255, 0.05);
          border-color: var(--border-light);
        }
        
        .nav-item.active {
          background: rgba(59, 130, 246, 0.15);
          border-color: rgba(59, 130, 246, 0.3);
        }
        
        .nav-icon {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.05);
          border-radius: var(--radius-sm);
          border: 1px solid var(--border);
          color: var(--text-muted);
        }
        
        .nav-label {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--text-light);
        }
      </style>
      
      <div class="navbar-header">
        <div class="brand-dot"></div>
        <div class="brand-title">Espace Codage</div>
      </div>
      
      <div class="nav-section">Projets</div>
      <div class="nav-item active">
        <div class="nav-icon">
          <i data-feather="code"></i>
        </div>
        <div class="nav-label">Espace Codage - Projet 1</div>
      </div>
      <div class="nav-item">
        <div class="nav-icon">
          <i data-feather="code"></i>
        </div>
        <div class="nav-label">Espace Codage - Projet 2</div>
      </div>
      <div class="nav-section">Raccourcis</div>
      <div class="nav-item">
        <div class="nav-icon">
          <i data-feather="message-circle"></i>
        </div>
        <a href="/rosalinda.html" class="nav-label">Rosalinda IA</a>
      </div>
      <div class="nav-item">
        <div class="nav-icon">
          <i data-feather="book"></i>
        </div>
        <div class="nav-label">Bibliothèque</div>
      </div>
        <div class="nav-item">
          <div class="nav-icon">
            <i data-feather="settings"></i>
          </div>
          <a href="/profile.html" class="nav-label">Profil & Paramètres</a>
        </div>
`;
    
    // Replace feather icons
    if (typeof feather !== 'undefined') {
      feather.replace();
    }
  }
}

customElements.define('custom-navbar', CustomNavbar);