components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 260px;
          height: 100vh;
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border-right: 1px solid rgba(229, 231, 235, 0.5);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          overflow-y: auto;
          position: relative;
          z-index: 10;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }
.sidebar.collapsed {
          width: 80px;
        }
        
        .sidebar-header {
          padding: 20px 16px;
          border-bottom: 1px solid #e5e7eb;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        
        .user-profile {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
        }
        
        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #e5e7eb;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          overflow: hidden;
        }
        
        .user-info {
          flex: 1;
        }
        
        .user-name {
          font-weight: 600;
          font-size: 15px;
          margin-bottom: 2px;
        }
        
        .user-role {
          font-size: 13px;
          color: #6b7280;
        }
        
        .sidebar-menu {
          padding: 16px 0;
        }
        
        .menu-section {
          margin-bottom: 24px;
        }
        
        .section-title {
          padding: 0 16px 8px;
          font-size: 12px;
          font-weight: 600;
          color: #9ca3af;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .menu-item {
          display: flex;
          align-items: center;
          padding: 10px 16px;
          color: #4b5563;
          border-radius: 6px;
          margin: 0 8px;
          cursor: pointer;
          transition: all 0.2s;
        }
        
        .menu-item:hover {
          background-color: #f3f4f6;
          color: #111827;
        }
        
        .menu-item.active {
          background-color: #eef2ff;
          color: #4f46e5;
        }
        
        .menu-icon {
          margin-right: 12px;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .menu-text {
          font-size: 14px;
          font-weight: 500;
        }
        
        .collapsed .menu-text,
        .collapsed .section-title,
        .collapsed .user-info {
          display: none;
        }
        
        .collapsed .user-avatar {
          margin-right: 0;
        }
        
        .toggle-btn {
          background: none;
          border: none;
          color: #6b7280;
          cursor: pointer;
          padding: 4px;
          border-radius: 4px;
        }
        
        .toggle-btn:hover {
          background-color: #f3f4f6;
        }
        
        @media (max-width: 768px) {
          .sidebar {
            width: 80px;
          }
          
          .menu-text,
          .section-title,
          .user-info {
            display: none;
          }
          
          .user-avatar {
            margin-right: 0;
          }
        }
      </style>
      
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="user-profile">
            <div class="user-avatar">
              <i class="fas fa-user"></i>
</div>
            <div class="user-info">
              <div class="user-name">Dr. Sarah Johnson</div>
              <div class="user-role">Professor</div>
            </div>
          </div>
          <button class="toggle-btn sidebar-toggle">
            <i class="fas fa-chevron-left"></i>
</button>
        </div>
        
        <div class="sidebar-menu">
          <div class="menu-section">
            <div class="section-title">Main</div>
            <div class="menu-item active">
              <div class="menu-icon">
                <i class="fas fa-home"></i>
              </div>
              <a href="index.html" class="menu-text">Dashboard</a>
            </div>
</div>
          
          <div class="menu-section">
            <div class="section-title">Content</div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-file-alt"></i>
</div>
              <a href="slides.html" class="menu-text">Slides</a>
            </div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-th"></i>
</div>
              <a href="blocks.html" class="menu-text">Blocks</a>
            </div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-edit"></i>
</div>
              <a href="assessments.html" class="menu-text">Assessments</a>
            </div>
</div>
          
          <div class="menu-section">
            <div class="section-title">Organization</div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-folder"></i>
</div>
              <a href="projects.html" class="menu-text">Projects</a>
</div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-shopping-bag"></i>
</div>
              <a href="marketplace.html" class="menu-text">Marketplace</a>
            </div>
</div>
          
          <div class="menu-section">
            <div class="section-title">Analytics</div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-users"></i>
</div>
              <a href="participants.html" class="menu-text">Participants</a>
            </div>
<div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-chart-bar"></i>
</div>
              <a href="tracking.html" class="menu-text">Tracking</a>
            </div>
</div>
          
          <div class="menu-section">
            <div class="section-title">Tools</div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-bolt"></i>
</div>
              <a href="ai-assistant.html" class="menu-text">AI Assistant</a>
            </div>
            <div class="menu-item">
              <div class="menu-icon">
                <i class="fas fa-cog"></i>
              </div>
              <a href="settings.html" class="menu-text">Settings</a>
            </div>
</div>
        </div>
      </div>
    `;
    
    // Add event listener for the toggle button
    this.shadowRoot.querySelector('.sidebar-toggle').addEventListener('click', () => {
      const sidebar = this.shadowRoot.querySelector('.sidebar');
      sidebar.classList.toggle('collapsed');
      
      // Change the icon based on state
      const icon = this.shadowRoot.querySelector('.sidebar-toggle i');
      if (sidebar.classList.contains('collapsed')) {
        icon.classList.replace('fa-chevron-left', 'fa-chevron-right');
      } else {
        icon.classList.replace('fa-chevron-right', 'fa-chevron-left');
      }
});
  }
}

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