Side Panel

A versatile side panel component for displaying content in a sliding panel.

The SidePanel component is a flexible and accessible component that displays content in a sliding panel from the side of the screen. It supports titles, descriptions, custom content, and various styling options while maintaining accessibility standards.

Import

import { SidePanel } from 'h2o-library';

Basic Usage

Basic Side Panel

Side Panel with Description

Side Panel with Custom Content

<SidePanel
  isOpen={true}
  onClose={() => {}}
  title="Custom Side Panel"
  description="This panel contains custom content and styling."
  className="custom-panel"
>
  <div className="space-y-4">
    <p>This side panel contains custom content with multiple elements:</p>
    <ul className="list-disc pl-5">
      <li>Custom styling</li>
      <li>Multiple paragraphs</li>
      <li>Interactive elements</li>
    </ul>
    <div className="bg-gray-100 p-4 rounded-lg">
      <h4 className="font-semibold mb-2">Additional Information</h4>
      <p>This is a styled section within the panel content.</p>
    </div>
    <div className="flex justify-end gap-2">
      <Button variant="secondary">
        Cancel
      </Button>
      <Button>Confirm</Button>
    </div>
  </div>
</SidePanel>

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	-	Whether the side panel is open
`onClose`	`() => void`	-	Callback when the side panel should close
`title`	`string`	-	The title of the side panel
`description`	`string`	-	Optional description text
`children`	`React.ReactNode`	-	The content of the side panel
`className`	`string`	-	Additional CSS classes for the side panel

Design Considerations

Clear visual hierarchy with title and description
Consistent spacing and alignment
Visual feedback for interactions
Support for rich content and custom styling
Proper overlay and backdrop
Smooth animations for opening/closing
Responsive design for different screen sizes
Custom styling options for both container and content
Proper width and height management
Support for different panel positions (left/right)

Accessibility

Proper ARIA attributes for dialog role
Focus management (traps focus within panel)
Keyboard navigation support
Escape key to close
Click outside to close
Screen reader announcements
Proper heading structure
Focus restoration when closed
Proper contrast for all text elements
Clear visual indicators for interactive elements
Support for reduced motion preferences
Proper touch targets for mobile devices

Components