components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 280px;
          background-color: #ffffff;
          border-right: 1px solid #e0e0e0;
          height: 100%;
          overflow-y: auto;
          padding-top: 8px;
        }
        .sidebar-item {
          padding: 0 12px 0 26px;
          height: 32px;
          display: flex;
          align-items: center;
          border-radius: 0 16px 16px 0;
          margin-right: 12px;
          font-size: 14px;
          color: var(--gmail-dark-gray);
        }
        .sidebar-item:hover {
          background-color: #f1f3f4;
        }
        .sidebar-item.active {
          background-color: #e8f0fe;
          color: var(--gmail-blue);
          font-weight: 600;
        }
        .sidebar-item.active i {
          color: var(--gmail-blue);
        }
.compose-btn {
          background-color: #c2e7ff;
          color: #001d35;
          border-radius: 16px;
          padding: 0 24px 0 12px;
          height: 48px;
          margin: 8px 0 16px 8px;
          font-weight: 500;
          box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
        }
        .compose-btn:hover {
          box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15);
        }
      </style>
      <div class="sidebar pt-2">
        <button class="compose-btn flex items-center">
          <i data-feather="edit" class="mr-2"></i>
          Compose
        </button>
        
        <div class="sidebar-item active">
          <i data-feather="inbox" class="mr-3"></i>
          Inbox
          <span class="ml-auto font-medium">2.3k</span>
        </div>
        
        <div class="sidebar-item">
          <i data-feather="star" class="mr-3"></i>
          Starred
        </div>
        
        <div class="sidebar-item">
          <i data-feather="clock" class="mr-3"></i>
          Snoozed
        </div>
        
        <div class="sidebar-item">
          <i data-feather="send" class="mr-3"></i>
          Sent
        </div>
        
        <div class="sidebar-item">
          <i data-feather="file-text" class="mr-3"></i>
          Drafts
        </div>
        
        <div class="sidebar-item">
          <i data-feather="trash-2" class="mr-3"></i>
          Trash
        </div>
        
        <div class="px-6 py-2 mt-4 text-xs font-medium text-gray-500">
          LABELS
        </div>
        
        <div class="sidebar-item">
          <i data-feather="tag" class="mr-3 text-green-500"></i>
          Important
        </div>
        
        <div class="sidebar-item">
          <i data-feather="tag" class="mr-3 text-orange-500"></i>
          Personal
        </div>
        
        <div class="sidebar-item">
          <i data-feather="tag" class="mr-3 text-blue-500"></i>
          Work
        </div>
      </div>
    `;
  }
}
customElements.define('custom-sidebar', CustomSidebar);