81. Advanced Accordion

Build an advanced Accordion component that supports nested accordions, advanced keyboard navigation, and state persistence.

Requirements

1. All Previous Features (from Accordion I & II)

• Basic expand/collapse
• Animations and transitions
• Keyboard navigation
• Multiple open items support

2. Nested Accordions

• Support accordion items that contain other accordions
• Recursive rendering of nested structure
• Independent state management for nested levels
• Proper keyboard navigation through nested levels

3. Advanced Keyboard Navigation

• Arrow keys navigate within current level
• Right arrow expands nested accordion
• Left arrow collapses nested accordion
• Tab key moves focus between accordion headers
• Proper focus management for nested structures

4. State Persistence

• Persist open items to localStorage
• Restore state on mount
• Optional: Persist nested accordion states

5. Edge Cases

• Handle deeply nested structures (3+ levels)
• Handle empty accordion items
• Handle disabled nested items
• Maintain focus after state changes

Example Usage

const items = [
  {
    id: 'item1',
    title: 'Section 1',
    content: <div>Regular content</div>
  },
  {
    id: 'item2',
    title: 'Section 2',
    content: (
      <Accordion 
        items={nestedItems} 
        allowMultiple={true}
      />
    )
  },
];

> Note: Build on top of Accordion II. Focus on recursive rendering and robust state management for nested structures.