components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 260px;
          background-color: #fff;
          border-left: 1px solid #e5e7eb;
          padding: 1.5rem 1rem;
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          height: 100vh;
          position: fixed;
          right: 0; 
          top: 0;
        }
        .sidebar-header { 
          text-align: center; 
          margin-bottom: 2rem; 
          padding-bottom: 1.5rem; 
          border-bottom: 1px solid #e5e7eb; 
        }
        .sidebar-header i { 
          font-size: 2.5rem; 
          color: #f97316; 
        }
        .sidebar-header h1 { 
          font-size: 1.5rem; 
          margin-top: 0.5rem;
          color: #1f2937;
        }
        .sidebar-nav { 
          list-style: none; 
          flex-grow: 1; 
        }
        .sidebar-nav a { 
          display: flex; 
          align-items: center; 
          padding: 0.9rem 1rem; 
          color: #6b7280; 
          text-decoration: none; 
          border-radius: 8px; 
          margin-bottom: 0.5rem; 
          transition: all 0.2s; 
        }
        .sidebar-nav a:hover { 
          background-color: rgba(249, 115, 22, 0.1); 
          color: #1f2937; 
        }
        .sidebar-nav a.active { 
          background-color: #f97316; 
          color: white !important; 
          font-weight: 700; 
        }
        .sidebar-nav a .icon { 
          font-size: 1.2rem; 
          margin-left: 1rem; 
          width: 25px; 
        }
      </style>
      <aside class="sidebar">
        <div class="sidebar-header">
          <i class="fa-solid fa-chart-line"></i>
          <h1>DataSaffron</h1>
        </div>
        <ul class="sidebar-nav">
          <li><a href="dashboard.html?department=operations" class="nav-link" data-target="operations"><i class="icon fa-solid fa-server"></i><span>إدارة التشغيل</span></a></li>
          <li><a href="dashboard.html?department=maintenance" class="nav-link" data-target="maintenance"><i class="icon fa-solid fa-wrench"></i><span>إدارة الصيانة</span></a></li>
          <li><a href="dashboard.html?department=it" class="nav-link" data-target="it"><i class="icon fa-solid fa-laptop-code"></i><span>إدارة التقنية</span></a></li>
          <li><a href="dashboard.html?department=quality" class="nav-link" data-target="quality"><i class="icon fa-solid fa-award"></i><span>إدارة الجودة</span></a></li>
          <li><a href="dashboard.html?department=upload" class="nav-link" data-target="upload"><i class="icon fa-solid fa-upload"></i><span>رفع التقارير</span></a></li>
        </ul>
      </aside>
    `;
  }
}
customElements.define('custom-sidebar', CustomSidebar);