components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 240px;
          height: 100%;
          transition: all 0.3s;
        }
        .nav-item.active {
          background-color: #EFF6FF;
          color: #1D4ED8;
          border-left: 3px solid #1D4ED8;
        }
        .nav-item.active i {
          color: #1D4ED8;
        }
        .nav-item:hover:not(.active) {
          background-color: #F3F4F6;
        }
        .submenu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
        }
        .submenu.open {
          max-height: 500px;
        }
        @media (max-width: 768px) {
          .sidebar {
            position: fixed;
            z-index: 40;
            transform: translateX(-100%);
          }
          .sidebar.open {
            transform: translateX(0);
          }
        }
      </style>
      <aside class="sidebar bg-white border-r border-gray-200 overflow-y-auto">
        <div class="px-4 py-6">
          <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-800">Navigation</h2>
            <button class="md:hidden text-gray-500">
              <i data-feather="x"></i>
            </button>
          </div>
          
          <nav class="mt-8">
            <div class="space-y-1">
              <a href="#" data-section="dashboard" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group active">
                <i data-feather="home" class="text-gray-500 mr-3 flex-shrink-0"></i>
                Dashboard
              </a>
              
              <a href="#" data-section="recordings" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
                <i data-feather="mic" class="text-gray-500 mr-3 flex-shrink-0"></i>
                Recordings
              </a>
              
              <a href="#" data-section="transcriptions" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
                <i data-feather="file-text" class="text-gray-500 mr-3 flex-shrink-0"></i>
                Transcriptions
              </a>
              
              <div class="relative">
                <button class="nav-item flex items-center justify-between w-full px-3 py-2 text-sm font-medium rounded-md group">
                  <div class="flex items-center">
                    <i data-feather="users" class="text-gray-500 mr-3 flex-shrink-0"></i>
                    <span>User Management</span>
                  </div>
                  <i data-feather="chevron-down" class="text-gray-400 w-4 h-4 transform transition-transform"></i>
                </button>
                
                <div class="submenu pl-11 mt-1">
                  <a href="#" data-section="users" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
                    <i data-feather="user" class="text-gray-400 mr-2 w-3 h-3"></i>
                    Users
                  </a>
                  <a href="#" data-section="roles" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
                    <i data-feather="key" class="text-gray-400 mr-2 w-3 h-3"></i>
                    Roles & Permissions
                  </a>
                </div>
              </div>
              
              <a href="#" data-section="devices" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
                <i data-feather="cast" class="text-gray-500 mr-3 flex-shrink-0"></i>
                Devices
              </a>
              
              <a href="#" data-section="prompts" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
                <i data-feather="code" class="text-gray-500 mr-3 flex-shrink-0"></i>
                AI Prompts
              </a>
            </div>
            
            <div class="mt-12 pt-6 border-t border-gray-200">
              <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                Settings
              </h3>
              <div class="mt-3 space-y-1">
                <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
                  <i data-feather="settings" class="text-gray-400 mr-3 flex-shrink-0"></i>
                  System Settings
                </a>
                <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
                  <i data-feather="help-circle" class="text-gray-400 mr-3 flex-shrink-0"></i>
                  Help & Support
                </a>
              </div>
            </div>
          </nav>
        </div>
      </aside>
    `;
    
    // Add click handlers for navigation items
    const navItems = this.shadowRoot.querySelectorAll('.nav-item');
    navItems.forEach(item => {
      item.addEventListener('click', function() {
        // Remove active class from all items
        navItems.forEach(navItem => {
          navItem.classList.remove('active');
        });
        
        // Add active class to clicked item
        this.classList.add('active');
      });
    });
    
    // Add click handlers for dropdown menus
    const dropdownButtons = this.shadowRoot.querySelectorAll('.relative > button');
    dropdownButtons.forEach(button => {
      button.addEventListener('click', function() {
        const submenu = this.nextElementSibling;
        const icon = this.querySelector('i:last-child');
        
        submenu.classList.toggle('open');
        icon.classList.toggle('rotate-180');
      });
    });
    
    // Mobile menu toggle
    const mobileMenuButton = this.shadowRoot.querySelector('button.md\\:hidden');
    if (mobileMenuButton) {
      mobileMenuButton.addEventListener('click', () => {
        this.shadowRoot.querySelector('.sidebar').classList.toggle('open');
      });
    }
  }
}

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