components/notes-sidebar.js

class CustomNotesSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 280px;
          background: white;
          height: calc(100vh - 80px);
          position: sticky;
          top: 80px;
          border-right: 1px solid #e5e7eb;
          padding: 1.5rem;
        }
        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 1rem;
          color: #1f2937;
        }
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        li {
          margin-bottom: 0.5rem;
        }
        a {
          display: flex;
          align-items: center;
          padding: 0.5rem 1rem;
          border-radius: 0.375rem;
          color: #4b5563;
          text-decoration: none;
          transition: all 0.2s;
        }
        a:hover {
          background: #f3f4f6;
          color: #1f2937;
        }
        a.active {
          background: #e0e7ff;
          color: #4338ca;
        }
        i {
          margin-right: 0.75rem;
          width: 20px;
          height: 20px;
        }
        .category-header {
          font-size: 0.875rem;
          font-weight: 500;
          color: #6b7280;
          margin: 1.5rem 0 0.5rem 0;
          padding-left: 1rem;
        }
      </style>
      <div>
        <h3>My Notebooks</h3>
        <ul>
          <li><a href="/notes.html" class="active"><i data-feather="book"></i> All Notes</a></li>
          <li><a href="#"><i data-feather="star"></i> Favorites</a></li>
          <li><a href="#"><i data-feather="archive"></i> Archived</a></li>
        </ul>
        
        <div class="category-header">Categories</div>
        <ul>
          <li><a href="#"><i data-feather="code"></i> JavaScript</a></li>
          <li><a href="#"><i data-feather="cpu"></i> Algorithms</a></li>
          <li><a href="#"><i data-feather="database"></i> Databases</a></li>
          <li><a href="#"><i data-feather="layout"></i> UI/UX</a></li>
        </ul>
        
        <div class="category-header">Tags</div>
        <ul>
          <li><a href="#"><i data-feather="tag"></i> Important</a></li>
          <li><a href="#"><i data-feather="tag"></i> Tutorial</a></li>
          <li><a href="#"><i data-feather="tag"></i> Reference</a></li>
        </ul>
      </div>
    `;
    feather.replace();
  }
}
customElements.define('custom-notes-sidebar', CustomNotesSidebar);