Independent Scrolling Demo

This example demonstrates that the SidePanel and main content area scroll independently. Try scrolling in the sidebar and notice how it doesn't affect the main content area, and vice versa.

Section 1: Introduction

The SidePanel component uses overflow-y: auto on its content area, making it scrollable independently from the page. This is essential for applications with lots of navigation options or when you want the navigation to remain accessible while scrolling through long content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2: Features

The sidebar includes many different types of navigation items:

• Simple navigation items with icons
• Labels to organize sections
• Expandable menus with sub-items
• Spacers to push items to the bottom
• Active state indicators

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 3: Benefits

Independent scrolling provides several benefits:

1. Improved Navigation: Users can always access any navigation item without losing their place in the content
2. Better UX: Natural scrolling behavior that users expect from modern applications
3. Space Efficiency: You can have extensive navigation without cluttering the viewport
4. Flexible Layout: Works with both short and long content areas

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Section 4: Implementation Details

The SidePanel uses the following CSS properties to achieve independent scrolling:

#content {
  height: calc(100% - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

This ensures that the panel's content area takes up all available height minus the header, and enables vertical scrolling when needed.

Section 5: Responsive Behavior

The SidePanel can be collapsed to save space while keeping all navigation accessible. When collapsed, only icons are shown, and the panel takes up minimal width. Try clicking the toggle button in the header to see this in action.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Section 6: Customization

The SidePanel supports extensive customization through CSS variables:

• --bg: Background color of the panel
• --width-expanded: Width when expanded (default: 16rem)
• --width-collapsed: Width when collapsed (default: 3.5rem)
• --transition-duration: Animation duration for expand/collapse

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Section 7: Accessibility

The SidePanel includes proper ARIA labels and keyboard navigation support. The toggle button has descriptive aria-labels that change based on the panel's state ("Expand panel" or "Collapse panel").

Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Section 8: Integration

The SidePanel works seamlessly with the <k-main> component, which automatically adjusts its margins when the panel expands or collapses. This creates a smooth, coordinated experience.

The components communicate through custom events dispatched on the window object, making them loosely coupled but highly coordinated.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.

Section 9: Performance

The SidePanel is built with Lit and uses Shadow DOM for style encapsulation. This ensures excellent performance even with many navigation items, and prevents style conflicts with the rest of your application.

Transitions are hardware-accelerated using CSS transforms and opacity changes, providing smooth animations even on lower-end devices.

Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 10: Conclusion

The SidePanel component provides a robust, flexible navigation solution with independent scrolling, smooth animations, and excellent accessibility. It's perfect for applications that need persistent navigation with many options.

Try scrolling both the sidebar and this main content area to experience the independent scrolling behavior. Notice how smooth and natural it feels, and how you can always access any navigation item while browsing through the content.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?