components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 280px;
          height: 100vh;
          background: rgba(15, 23, 42, 0.95);
          border-right: 1px solid rgba(71, 85, 105, 0.5);
          color: #e2e8f0;
          overflow-y: auto;
          position: relative;
          z-index: 10;
        }
        
        .sidebar-header {
          padding: 1.5rem;
          border-bottom: 1px solid rgba(71, 85, 105, 0.5);
        }
        
        .sidebar-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #fb923c;
          margin-bottom: 0.5rem;
        }
        
        .sidebar-subtitle {
          font-size: 0.875rem;
          color: #94a3b8;
        }
        
        .node-category {
          padding: 1rem 1.5rem;
          border-bottom: 1px solid rgba(71, 85, 105, 0.5);
        }
        
        .category-title {
          font-size: 0.875rem;
          font-weight: 500;
          color: #94a3b8;
          margin-bottom: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        
        .node-item {
          display: flex;
          align-items: center;
          padding: 0.75rem;
          margin-bottom: 0.5rem;
          border-radius: 0.375rem;
          background: rgba(30, 41, 59, 0.5);
          cursor: grab;
          transition: all 0.2s ease;
        }
        
        .node-item:hover {
          background: rgba(251, 146, 60, 0.1);
          border-color: #fb923c;
        }
        
        .node-icon {
          width: 2rem;
          height: 2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(251, 146, 60, 0.1);
          border-radius: 0.25rem;
          margin-right: 0.75rem;
          color: #fb923c;
        }
        
        .node-label {
          font-size: 0.875rem;
          font-weight: 500;
        }
      </style>
      
      <div class="sidebar-header">
        <div class="sidebar-title">Tasking</div>
        <div class="sidebar-subtitle">Workflow Automation Tool</div>
</div>
      
      <div class="node-category">
        <div class="category-title">Triggers</div>
        <div class="node-item" draggable="true" data-type="trigger" data-label="Webhook">
          <div class="node-icon">
            <i data-feather="activity"></i>
          </div>
          <div class="node-label">Webhook Trigger</div>
        </div>
        <div class="node-item" draggable="true" data-type="trigger" data-label="Schedule">
          <div class="node-icon">
            <i data-feather="clock"></i>
          </div>
          <div class="node-label">Scheduled Trigger</div>
        </div>
      </div>
      
      <div class="node-category">
        <div class="category-title">Actions</div>
        <div class="node-item" draggable="true" data-type="action" data-label="API Request">
          <div class="node-icon">
            <i data-feather="send"></i>
          </div>
          <div class="node-label">API Request</div>
        </div>
        <div class="node-item" draggable="true" data-type="action" data-label="Database Query">
          <div class="node-icon">
            <i data-feather="database"></i>
          </div>
          <div class="node-label">Database Query</div>
        </div>
      </div>
      
      <div class="node-category">
        <div class="category-title">Logic</div>
        <div class="node-item" draggable="true" data-type="condition" data-label="If Condition">
          <div class="node-icon">
            <i data-feather="code"></i>
          </div>
          <div class="node-label">If Condition</div>
        </div>
        <div class="node-item" draggable="true" data-type="condition" data-label="Switch">
          <div class="node-icon">
            <i data-feather="git-branch"></i>
          </div>
          <div class="node-label">Switch</div>
        </div>
      </div>
    `;
    
    this.setupDragEvents();
  }
  
  setupDragEvents() {
    const nodeItems = this.shadowRoot.querySelectorAll('.node-item');
    
    nodeItems.forEach(node => {
      node.addEventListener('dragstart', (event) => {
        event.dataTransfer.setData('application/reactflow', node.dataset.type);
        event.dataTransfer.setData('application/reactflow-label', node.dataset.label);
        event.dataTransfer.effectAllowed = 'move';
      });
    });
  }
}

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