components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        aside {
          width: 250px;
          background: #f7fafc;
          padding: 1rem;
          height: 100vh;
          position: fixed;
          left: 0;
          top: 0;
          border-right: 1px solid #e5e7eb;
        }
        h3 { margin: 0 0 1rem 0; }
        ul { list-style: none; padding: 0; margin: 0; }
        li { margin: 0.5rem 0; }
        a { color: #374151; text-decoration: none; }
        a:hover { color: #667eea; }
      </style>
      <aside>
        <h3>Sidebar</h3>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about.html">About</a></li>
        </ul>
      </aside>
    `;
  }
}
customElements.define('custom-sidebar', CustomSidebar);