Accordion Menu

.accordion-menu-demo {
  display: flex;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 370px;
  border-radius: 16px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.demo-content {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo-content h2 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 700;
  color: #2d3748;
}

.demo-content p {
  margin: 0 0 24px 0;
  color: #4a5568;
  line-height: 1.6;
}

.demo-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}

.feature-icon {
  font-size: 20px;
}

.feature-item span {
  font-weight: 500;
  color: #2d3748;
}

.accordion-menu-container {
  width: 280px;
  background: white;
  border-left: 1px solid #e2e8f0;
}

.accordion-menu {
  height: 100%;
  overflow-y: auto;
}

.menu-header {
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.menu-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  border-bottom: 1px solid #f1f5f9;
}

.menu-link {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  text-decoration: none;
  color: #4a5568;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.menu-link:hover {
  background: #f8fafc;
  color: #2d3748;
}

.menu-link.active {
  background: #ebf8ff;
  color: #3182ce;
  border-right: 3px solid #3182ce;
}

.menu-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.menu-text {
  flex: 1;
  text-align: left;
}

.menu-arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.menu-item.expanded .menu-arrow {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f8fafc;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu-item.expanded .submenu {
  max-height: 500px;
}

.submenu-item {
  border-bottom: 1px solid #e2e8f0;
}

.submenu-item:last-child {
  border-bottom: none;
}

.submenu-link {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 52px;
  text-decoration: none;
  color: #718096;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
}

.submenu-link:hover {
  background: #edf2f7;
  color: #4a5568;
}

.submenu-link.active {
  background: #e6fffa;
  color: #319795;
}

.submenu-icon {
  font-size: 14px;
  margin-right: 10px;
  width: 16px;
  text-align: center;
}

.submenu-text {
  flex: 1;
  text-align: left;
}

.nested-arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
  margin-left: 6px;
}

.submenu-item.expanded .nested-arrow {
  transform: rotate(180deg);
}

.nested-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #edf2f7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu-item.expanded .nested-menu {
  max-height: 200px;
}

.nested-item {
  border-bottom: 1px solid #d1d5db;
}

.nested-item:last-child {
  border-bottom: none;
}

.nested-link {
  display: block;
  padding: 10px 20px 10px 84px;
  text-decoration: none;
  color: #6b7280;
  transition: all 0.3s ease;
  font-size: 12px;
}

.nested-link:hover {
  background: #d1d5db;
  color: #374151;
}

.nested-link.active {
  background: #dbeafe;
  color: #1d4ed8;
}

.nested-text {
  position: relative;
}

.nested-text::before {
  content: '•';
  position: absolute;
  left: -12px;
  color: #9ca3af;
}

/* Scrollbar styling */
.accordion-menu::-webkit-scrollbar {
  width: 6px;
}

.accordion-menu::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.accordion-menu::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.accordion-menu::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Responsive */
@media (max-width: 768px) {
  .accordion-menu-demo {
    flex-direction: column;
  }
  
  .demo-content {
    padding: 20px;
  }
  
  .accordion-menu-container {
    width: 100%;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }
  
  .demo-features {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .feature-item {
    flex: 1;
    min-width: 120px;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const accordionMenu = document.getElementById('accordionMenu');
  const submenuToggles = document.querySelectorAll('.submenu-toggle');
  const nestedToggles = document.querySelectorAll('.nested-toggle');
  const menuLinks = document.querySelectorAll('.menu-link:not(.submenu-toggle)');
  const submenuLinks = document.querySelectorAll('.submenu-link:not(.nested-toggle)');
  const nestedLinks = document.querySelectorAll('.nested-link');
  
  // Handle submenu toggles
  submenuToggles.forEach(toggle => {
    toggle.addEventListener('click', function(e) {
      e.preventDefault();
      
      const menuItem = this.closest('.menu-item');
      const submenuId = this.getAttribute('data-submenu');
      const submenu = document.getElementById(submenuId + '-submenu');
      
      // Close other submenus
      submenuToggles.forEach(otherToggle => {
        if (otherToggle !== this) {
          const otherMenuItem = otherToggle.closest('.menu-item');
          otherMenuItem.classList.remove('expanded');
        }
      });
      
      // Toggle current submenu
      menuItem.classList.toggle('expanded');
      
      // Show feedback
      const isExpanded = menuItem.classList.contains('expanded');
      const menuText = this.querySelector('.menu-text').textContent;
      showFeedback(`${menuText} menu ${isExpanded ? 'expanded' : 'collapsed'}`);
      
      // Update aria attributes
      this.setAttribute('aria-expanded', isExpanded);
    });
  });
  
  // Handle nested menu toggles
  nestedToggles.forEach(toggle => {
    toggle.addEventListener('click', function(e) {
      e.preventDefault();
      
      const submenuItem = this.closest('.submenu-item');
      const nestedId = this.getAttribute('data-nested');
      const nestedMenu = document.getElementById(nestedId + '-nested');
      
      // Close other nested menus
      nestedToggles.forEach(otherToggle => {
        if (otherToggle !== this) {
          const otherSubmenuItem = otherToggle.closest('.submenu-item');
          otherSubmenuItem.classList.remove('expanded');
        }
      });
      
      // Toggle current nested menu
      submenuItem.classList.toggle('expanded');
      
      // Show feedback
      const isExpanded = submenuItem.classList.contains('expanded');
      const submenuText = this.querySelector('.submenu-text').textContent;
      showFeedback(`${submenuText} submenu ${isExpanded ? 'expanded' : 'collapsed'}`);
      
      // Update aria attributes
      this.setAttribute('aria-expanded', isExpanded);
    });
  });
  
  // Handle menu link clicks
  function handleLinkClick(links, activeClass = 'active') {
    links.forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Remove active class from all links of the same type
        links.forEach(l => l.classList.remove(activeClass));
        
        // Add active class to clicked link
        this.classList.add(activeClass);
        
        // Get action and show feedback
        const action = this.getAttribute('data-action');
        if (action) {
          const linkText = this.querySelector('.menu-text, .submenu-text, .nested-text').textContent;
          showFeedback(`Navigated to: ${linkText}`);
        }
      });
    });
  }
  
  // Apply click handlers to different link types
  handleLinkClick(menuLinks);
  handleLinkClick(submenuLinks);
  handleLinkClick(nestedLinks);
  
  // Keyboard navigation
  accordionMenu.addEventListener('keydown', function(e) {
    const focusedElement = document.activeElement;
    
    switch(e.key) {
      case 'ArrowDown':
        e.preventDefault();
        navigateMenu('down', focusedElement);
        break;
      case 'ArrowUp':
        e.preventDefault();
        navigateMenu('up', focusedElement);
        break;
      case 'ArrowRight':
        e.preventDefault();
        if (focusedElement.classList.contains('submenu-toggle') || 
            focusedElement.classList.contains('nested-toggle')) {
          focusedElement.click();
        }
        break;
      case 'ArrowLeft':
        e.preventDefault();
        collapseCurrentLevel(focusedElement);
        break;
      case 'Enter':
      case ' ':
        e.preventDefault();
        focusedElement.click();
        break;
    }
  });
  
  function navigateMenu(direction, currentElement) {
    const allFocusableElements = accordionMenu.querySelectorAll(
      '.menu-link, .submenu-link, .nested-link'
    );
    const visibleElements = Array.from(allFocusableElements).filter(el => {
      return el.offsetParent !== null;
    });
    
    const currentIndex = visibleElements.indexOf(currentElement);
    let nextIndex;
    
    if (direction === 'down') {
      nextIndex = currentIndex + 1;
      if (nextIndex >= visibleElements.length) nextIndex = 0;
    } else {
      nextIndex = currentIndex - 1;
      if (nextIndex < 0) nextIndex = visibleElements.length - 1;
    }
    
    visibleElements[nextIndex].focus();
  }
  
  function collapseCurrentLevel(element) {
    if (element.closest('.nested-menu')) {
      const submenuItem = element.closest('.submenu-item');
      if (submenuItem.classList.contains('expanded')) {
        const nestedToggle = submenuItem.querySelector('.nested-toggle');
        nestedToggle.click();
        nestedToggle.focus();
      }
    } else if (element.closest('.submenu')) {
      const menuItem = element.closest('.menu-item');
      if (menuItem.classList.contains('expanded')) {
        const submenuToggle = menuItem.querySelector('.submenu-toggle');
        submenuToggle.click();
        submenuToggle.focus();
      }
    }
  }
  
  // Auto-expand first submenu for demo
  setTimeout(() => {
    const firstSubmenuToggle = submenuToggles[0];
    if (firstSubmenuToggle) {
      firstSubmenuToggle.click();
    }
  }, 1000);
  
  // Feedback function
  function showFeedback(message) {
    const existing = document.querySelector('.demo-feedback');
    if (existing) existing.remove();
    
    const feedback = document.createElement('div');
    feedback.className = 'demo-feedback';
    feedback.textContent = message;
    feedback.style.cssText = `
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      z-index: 10001;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    
    document.body.appendChild(feedback);
    
    requestAnimationFrame(() => {
      feedback.style.opacity = '1';
    });
    
    setTimeout(() => {
      feedback.style.opacity = '0';
      setTimeout(() => feedback.remove(), 300);
    }, 2500);
  }
  
  // Initial feedback
  setTimeout(() => {
    showFeedback('Click on menu items with arrows to expand sections!');
  }, 500);
  
  // Add focus styles
  const style = document.createElement('style');
  style.textContent = `
    .menu-link:focus,
    .submenu-link:focus,
    .nested-link:focus {
      outline: 2px solid #3182ce;
      outline-offset: -2px;
      background: #ebf8ff;
    }
  `;
  document.head.appendChild(style);
});