components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .sidebar {
          width: 260px;
          height: 100vh;
          position: fixed;
          top: 0;
          left: 0;
          background: #1e293b;
          color: white;
          z-index: 100;
          overflow-y: auto;
          transition: all 0.3s ease;
          box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar-header {
          padding: 1.5rem 1rem;
          border-bottom: 1px solid #334155;
        }
        
        .logo-container {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }
        
        .logo-icon {
          width: 2rem;
          height: 2rem;
          color: #60a5fa;
        }
        .logo-text {
          font-size: 1.25rem;
          font-weight: 700;
          color: #f8fafc;
        }
        
        .logo-subtext {
          font-size: 0.75rem;
          color: #94a3b8;
          margin-top: 0.25rem;
        }
.nav-links {
          padding: 1rem 0;
        }
        
        .nav-section {
          padding: 0.5rem 1rem;
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #64748b;
          font-weight: 600;
          margin-top: 1rem;
        }
        
        .nav-link {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.2s ease;
          border-left: 3px solid transparent;
        }
        
        .nav-link:hover {
          background: #334155;
          color: #f1f5f9;
        }
        
        .nav-link.active {
          background: #334155;
          color: #60a5fa;
          border-left: 3px solid #3b82f6;
        }
        
        .nav-link i {
          width: 1.25rem;
          height: 1.25rem;
        }
        
        .nav-link-text {
          font-weight: 500;
        }
        
        .badge {
          margin-left: auto;
          background: #ef4444;
          color: white;
          font-size: 0.75rem;
          padding: 0.125rem 0.5rem;
          border-radius: 9999px;
        }
        
        .user-info {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 1rem;
          border-top: 1px solid #334155;
          background: #1e293b;
        }
        
        .user-profile {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }
        
        .avatar {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 9999px;
          background: #3b82f6;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
        }
        
        .user-details {
          flex: 1;
        }
        
        .user-name {
          font-weight: 600;
          font-size: 0.875rem;
        }
        
        .user-role {
          font-size: 0.75rem;
          color: #94a3b8;
        }
        
        .user-actions {
          display: flex;
          gap: 0.5rem;
          margin-top: 0.75rem;
        }
        
        .action-btn {
          flex: 1;
          background: #334155;
          border: none;
          color: #cbd5e1;
          padding: 0.5rem;
          border-radius: 0.375rem;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .action-btn:hover {
          background: #475569;
        }
      </style>
      
      <aside class="sidebar">
        <div class="sidebar-header">
          <div class="logo-container">
            <i data-feather="shield" class="logo-icon"></i>
            <div>
              <div class="logo-text">Contrôle de patrouille</div>
              <div class="logo-subtext">Système de sécurité</div>
            </div>
          </div>
</div>
        <nav class="nav-links">
          <div class="nav-section">Principal</div>
          <a href="index.html" class="nav-link active">
            <i data-feather="home"></i>
            <span class="nav-link-text">Tableau de bord</span>
          </a>
          <a href="points.html" class="nav-link">
            <i data-feather="map-pin"></i>
            <span class="nav-link-text">Points de contrôle</span>
          </a>
          <a href="rounds.html" class="nav-link">
            <i data-feather="refresh-cw"></i>
            <span class="nav-link-text">Rondes de patrouille</span>
          </a>
          <a href="reports.html" class="nav-link">
            <i data-feather="bar-chart-2"></i>
            <span class="nav-link-text">Rapports</span>
          </a>
          
          <div class="nav-section">Gestion</div>
          <a href="companies.html" class="nav-link">
            <i data-feather="briefcase"></i>
            <span class="nav-link-text">Entreprises</span>
          </a>
          <a href="guards.html" class="nav-link">
            <i data-feather="users"></i>
            <span class="nav-link-text">Gardes</span>
          </a>
          <a href="settings.html" class="nav-link">
            <i data-feather="settings"></i>
            <span class="nav-link-text">Paramètres</span>
          </a>
          <a href="schedule.html" class="nav-link">
            <i data-feather="calendar"></i>
            <span class="nav-link-text">Calendrier</span>
          </a>
          
          <div class="nav-section">Alertes</div>
          <a href="incidents.html" class="nav-link">
            <i data-feather="alert-triangle"></i>
            <span class="nav-link-text">Incidents</span>
            <span class="badge">3</span>
          </a>
          <a href="notifications.html" class="nav-link">
            <i data-feather="bell"></i>
            <span class="nav-link-text">Notifications</span>
            <span class="badge">7</span>
          </a>
</nav>
        
        <div class="user-info">
          <div class="user-profile">
            <div class="avatar">AJ</div>
            <div class="user-details">
              <div class="user-name">Alex Johnson</div>
              <div class="user-role">System Admin</div>
            </div>
          </div>
          <div class="user-actions">
            <button class="action-btn">
              <i data-feather="user" style="width: 1rem; height: 1rem;"></i>
            </button>
            <button class="action-btn">
              <i data-feather="settings" style="width: 1rem; height: 1rem;"></i>
            </button>
            <button class="action-btn">
              <i data-feather="log-out" style="width: 1rem; height: 1rem;"></i>
            </button>
          </div>
        </div>
      </aside>
    `;
    
    // 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-sidebar', CustomSidebar);