components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .sidebar {
          position: fixed;
          top: 0;
          left: 0;
          width: 250px;
          height: 100vh;
          background: #1F2937;
          padding: 1.5rem 0;
          border-right: 1px solid #374151;
          z-index: 100;
          overflow-y: auto;
          transition: transform 0.3s ease;
        }
        
        .logo {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 1.5rem;
          font-weight: 700;
          color: white;
          text-decoration: none;
          padding: 0 1.5rem 1.5rem;
          border-bottom: 1px solid #374151;
          margin-bottom: 1.5rem;
        }
        
        .logo-icon {
          background: linear-gradient(135deg, #8B5CF6, #EC4899);
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .nav-links {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        
        .nav-item {
          margin-bottom: 0.25rem;
        }
        
        .nav-link {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 0.75rem 1.5rem;
          color: #9CA3AF;
          text-decoration: none;
          transition: all 0.3s ease;
          font-weight: 500;
        }
        
        .nav-link:hover {
          background: #374151;
          color: white;
        }
        
        .nav-link.active {
          background: #4C1D95;
          color: white;
        }
        
        .nav-link i {
          width: 20px;
          height: 20px;
        }
        
        .divider {
          height: 1px;
          background: #374151;
          margin: 1.5rem 0;
        }
        
        .account-section {
          padding: 1.5rem;
          position: absolute;
          bottom: 0;
          width: 100%;
        }
        
        .account-card {
          background: #374151;
          border-radius: 12px;
          padding: 1rem;
        }
        
        .account-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        
        .account-title {
          font-weight: 600;
          color: #D1D5DB;
        }
        
        .account-address {
          font-size: 0.875rem;
          color: #9CA3AF;
          margin-bottom: 0.75rem;
          word-break: break-all;
        }
        
        .account-balance {
          font-weight: 700;
          font-size: 1.25rem;
          margin-bottom: 1rem;
        }
        
        .account-actions {
          display: flex;
          gap: 0.5rem;
        }
        
        .action-btn {
          flex: 1;
          background: #4B5563;
          border: none;
          border-radius: 8px;
          color: white;
          padding: 0.5rem;
          cursor: pointer;
          transition: background 0.3s ease;
        }
        
        .action-btn:hover {
          background: #6B7280;
        }
        
        @media (max-width: 1024px) {
          .sidebar {
            transform: translateX(-100%);
          }
          
          .sidebar.open {
            transform: translateX(0);
          }
        }
      </style>
      
      <aside class="sidebar">
        <a href="/" class="logo">
          <div class="logo-icon">
            <i data-feather="zap" style="width: 20px; height: 20px; stroke: white;"></i>
          </div>
          <span>MegaETH</span>
        </a>
        
        <ul class="nav-links">
          <li class="nav-item">
            <a href="/" class="nav-link">
              <i data-feather="home"></i>
              <span>Overview</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="crypto-dashboard.html" class="nav-link active">
              <i data-feather="bar-chart-2"></i>
              <span>Dashboard</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i data-feather="trending-up"></i>
              <span>Markets</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i data-feather="layers"></i>
              <span>Staking</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i data-feather="credit-card"></i>
              <span>Spot Trading</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i data-feather="repeat"></i>
              <span>Convert</span>
            </a>
          </li>
        </ul>
        
        <div class="divider"></div>
        
        <ul class="nav-links">
          <li class="nav-item">
            <a href="about.html" class="nav-link">
              <i data-feather="info"></i>
              <span>About</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="tokenomics.html" class="nav-link">
              <i data-feather="pie-chart"></i>
              <span>Tokenomics</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="roadmap.html" class="nav-link">
              <i data-feather="map"></i>
              <span>Roadmap</span>
            </a>
          </li>
        </ul>
        
        <div class="account-section">
          <div class="account-card">
            <div class="account-header">
              <div class="account-title">My Account</div>
              <i data-feather="settings" style="width: 16px; height: 16px; color: #9CA3AF;"></i>
            </div>
            <div class="account-address">0x4d...f3e2</div>
            <div class="account-balance">$24,568.72</div>
            <div class="account-actions">
              <button class="action-btn">
                <i data-feather="log-out" style="width: 16px; height: 16px;"></i>
              </button>
              <button class="action-btn">
                <i data-feather="plus" style="width: 16px; height: 16px;"></i>
              </button>
            </div>
          </div>
        </div>
      </aside>
    `;
    
    // Initialize feather icons
    const script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
    script.onload = () => {
      if (typeof feather !== 'undefined') {
        feather.replace();
      }
    };
    this.shadowRoot.appendChild(script);
  }
}

customElements.define('custom-sidebar', CustomSidebar);