components/admin-sidebar.js

class AdminSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        aside {
          width: 280px;
          background: #1f2937;
          color: white;
          padding: 1.5rem 1rem;
          height: 100vh;
          position: fixed;
          left: 0;
          top: 0;
          z-index: 40;
        }
        .logo {
          font-weight: 800;
          font-size: 1.5rem;
          background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 2rem;
          display: block;
          text-align: center;
        }
        nav {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        a {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          color: #d1d5db;
          text-decoration: none;
          border-radius: 0.5rem;
          transition: all 0.2s;
          text-decoration: none;
        }
        a:hover {
          background: #374151;
          color: white;
        }
        a.active {
          background: #4f46e5;
          color: white;
        }
        .admin-header {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          border-bottom: 1px solid #374151;
          margin-bottom: 1rem;
        }
        .admin-avatar {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          background: #4f46e5;
        }
      </style>
      <aside>
        <div class="admin-header">
          <div class="admin-avatar"></div>
          <div>
            <div class="font-semibold" id="adminName">Admin</div>
            <div class="text-xs text-gray-400">Administrator</div>
        </div>
        <nav>
          <a href="/admin-dashboard.html" class="active">
            <i data-feather="home"></i>
            <span>Dashboard</span>
          </a>
          <a href="/admin-users.html">
            <i data-feather="users"></i>
            <span>User Management</span>
          </a>
          <a href="/admin-matches.html">
            <i data-feather="zap"></i>
            <span>Match Management</span>
          </a>
          <a href="/admin-analytics.html">
            <i data-feather="bar-chart"></i>
            <span>Analytics</span>
          </a>
          <a href="/admin-settings.html">
            <i data-feather="settings"></i>
            <span>System Settings</span>
          </a>
          <a href="/admin-audit.html">
            <i data-feather="file-text"></i>
            <span>Audit Log</span>
          </a>
          <a href="/admin-reports.html">
            <i data-feather="printer"></i>
            <span>Reports</span>
          </a>
        </nav>
      </aside>
    `;
  }
}
customElements.define('admin-sidebar', AdminSidebar);