components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        aside {
          width: 250px;
          background: rgba(17, 24, 39, 0.8);
          padding: 1rem;
          height: calc(100dvh - 4rem);
          position: fixed;
          left: 0;
          top: 4rem;
          border-right: 1px solid rgba(255,255,255,0.1);
          backdrop-filter: blur(10px);
          z-index: 10;
        }
        h3 { 
          color: #8b5cf6;
          margin: 0 0 1rem 0; 
          font-size: 1.25rem;
          font-weight: 600;
        }
        ul { list-style: none; padding: 0; margin: 0; }
        li { margin: 0.75rem 0; }
        a { 
          color: rgba(255,255,255,0.8); 
          text-decoration: none;
          display: flex;
          align-items: center;
          padding: 0.5rem 0.75rem;
          border-radius: 0.5rem;
          transition: all 0.2s;
        }
        a:hover { 
          background: rgba(109, 40, 217, 0.2); 
          color: white;
        }
        a i {
          margin-right: 0.75rem;
          width: 20px;
          height: 20px;
        }
      </style>
      <aside>
        <h3>Semantic Topology Engine</h3>
        <ul>
          <li><a href="/"><i data-feather="home"></i> Home</a></li>
          <li><a href="#"><i data-feather="hexagon"></i> κ Geometry</a></li>
          <li><a href="#"><i data-feather="wind"></i> Field Dynamics</a></li>
          <li><a href="#"><i data-feather="codepen"></i> Substrate BSP</a></li>
          <li><a href="#"><i data-feather="compass"></i> 3I/ATLAS Data</a></li>
          <li><a href="#"><i data-feather="cpu"></i> GOS Console</a></li>
          <li><a href="#"><i data-feather="database"></i> Entropy Metrics</a></li>
        </ul>
</aside>
    `;

    // Feather icons (will be replaced when main script runs feather.replace())
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/feather-icons';
    this.shadowRoot.appendChild(script);
  }
}
customElements.define('custom-sidebar', CustomSidebar);