Select First Push Sidebar

A collapsible sidebar layout with smooth transitions and opacity animations. The sidebar pushes content when expanded and retracts when collapsed.

Basic Usage

A simple sidebar that can be toggled open and closed with built-in buttons.

Usage

import { SelectFirstPushSidebar } from "@zenforge/ui";

<SelectFirstPushSidebar
  sidebar={<YourSidebarContent />}
  retracted={retracted}
  onRetractedChange={setRetracted}
>
  <YourMainContent />
</SelectFirstPushSidebar>

Examples

Interactive Sidebar

Main Content

This is the main content area.

The sidebar will push this content when expanded.

Note: Content has top padding to avoid overlap with the toggle button.

Custom Button Visibility

Control which toggle buttons are shown using showOpenButton and showCloseButton props.

Usage

import { SelectFirstPushSidebar } from "@zenforge/ui";

Examples

External Controls Only

Main Content

This example has no built-in toggle buttons.

Initially Collapsed

Start with the sidebar collapsed by setting the initial state to true.

Usage

import { SelectFirstPushSidebar } from "@zenforge/ui";

Examples

Collapsed by Default

Main Content

The sidebar is initially hidden.

Click the menu icon at the top-left to reveal it.

Props

Prop

Type

Description

sidebar

React.ReactNode

Content to display in the sidebar

children

React.ReactNode

Main content area

retracted

boolean

Controls whether the sidebar is collapsed

onRetractedChange

(retracted: boolean) => void

Callback when sidebar state changes

showOpenButton

boolean

Show menu button when collapsed (default: true)

showCloseButton

boolean

Show close button when expanded (default: true)

closeButtonClassName

string

Custom class for close button

openButtonClassName

string

Custom class for open button

Features

Smooth Transitions:

Content fades in/out with opacity animations while the sidebar width transitions smoothly

Responsive:

Adapts to different screen sizes with mobile-first design

Controlled:

Fully controlled component - integrate with any state management solution

Accessible:

Toggle buttons include proper ARIA labels

Customizable:

Control button visibility and styling with props