Grouped Sidebar

This sidebar combines the best of both worlds: a collapsible main sidebar and expandable navigation groups within it.

The sidebar state (open/close) and individual group expansion states are persisted to localStorage with the aceternity- prefix, so users see their preferred configuration even after page navigation or browser refresh.

Primary navigation links appear at the top without grouping, followed by a divider, then grouped sections (Content, Team, Settings) that can be independently expanded or collapsed. When the main sidebar is collapsed, only icons are visible. When a group is expanded in collapsed mode, child link icons stack vertically.

Uses Framer Motion for smooth width transitions (300px expanded, 70px collapsed) and height animations for group expand/collapse. React Context shares the open state across all child components.

Perfect for complex dashboards, admin panels, or any application with hierarchical navigation that benefits from organized, collapsible sections.