Side Pane

A collapsible side pane component with actions, details, and permissions management, perfect for document and file management interfaces.

Examples

Default Document Side Pane

A complete side pane with document actions, details, and permissions management.

Interactive Demo

Click the button below to toggle the side pane. The pane appears on the right side of the screen.

Component Location

The side pane component is located in the @/components/panes directory.

Project Structure

components/
├── panes/
│   ├── side-pane.tsx                 # Main side pane component
│   └── index.ts                      # Export file
├── ui/
│   ├── button.tsx
│   ├── separator.tsx
│   ├── tooltip.tsx
│   └── ...
└── ...

Usage:
import { SidePane, createDefaultSidePaneConfig } from "@/components/panes"

Custom Configuration

Create custom side pane configurations with different actions and details.

Custom configuration example

const customConfig = {
  actions: [
    {
      id: "save",
      label: "Save",
      icon: <i className="modus-icons">save_disk</i>,
      onClick: () => console.log('Save'),
    },
    {
      id: "share",
      label: "Share",
      icon: <i className="modus-icons">share</i>,
      onClick: () => console.log('Share'),
    },
    {
      id: "delete",
      label: "Delete",
      icon: <i className="modus-icons">delete</i>,
      variant: "destructive",
      onClick: () => console.log('Delete'),
    },
  ],
  details: {
    version: 2,
    versionLink: "View history",
    size: "12.5 MB",
    created: "Jan 15, 2025",
    createdBy: "John Doe",
    modified: "Jan 20, 2025",
    modifiedBy: "Jane Smith",
    permissions: {
      defaultAccess: "View only",
      users: [
        { name: "Team Lead", access: "Full access" },
        { name: "Developer", access: "Edit access" }
      ]
    }
  }
}

Configuration Options

The side pane supports various configuration options.

Configuration examples

// Default positioning (right side)
<SidePane title="Document" isOpen={true} />

// Custom width
<SidePane title="Document" width="400px" />

// Collapsed by default
<SidePane title="Document" isOpen={false} />

// Without tooltips
<SidePane title="Document" showTooltips={false} />

Usage

components/my-app.tsx

import { SidePane, createDefaultSidePaneConfig } from "@/components/panes"

function MyApp() {
  const [isPaneOpen, setIsPaneOpen] = useState(true)
  const config = createDefaultSidePaneConfig()
  
  const handleAction = (actionId: string) => {
    console.log('Action:', actionId)
    // Handle pane actions
  }

  return (
    <div className="relative">
      <SidePane
        title="My Document"
        isOpen={isPaneOpen}
        onToggle={() => setIsPaneOpen(!isPaneOpen)}
        onEdit={() => console.log('Edit')}
        onClose={() => setIsPaneOpen(false)}
        actions={config.actions}
        details={config.details}
        showTooltips={true}
      >
        <div className="p-4">
          <p>Custom content goes here</p>
        </div>
      </SidePane>
      
      {/* Your main content */}
      <div className="mr-80">
        <h1>Main Content</h1>
      </div>
    </div>
  )
}

API Reference

SidePane

Prop	Type	Default	Description
`title`	`string`	`"3D"`	Title displayed in the pane header
`isOpen`	`boolean`	`true`	Whether the pane is open or collapsed
`onToggle`	`() => void`	-	Callback when pane is toggled
`onEdit`	`() => void`	-	Callback when edit button is clicked
`onClose`	`() => void`	-	Callback when close button is clicked
`actions`	`SidePaneAction[]`	`[]`	Array of action buttons to display
`details`	`SidePaneDetails`	-	Details object with version, size, dates, permissions
`showTooltips`	`boolean`	`true`	Whether to show tooltips on action buttons
`width`	`string`	`"320px"`	Width of the side pane when open

SidePaneAction

Prop	Type	Description
`id`	`string`	Unique identifier for the action
`label`	`string`	Label for the action (shown in tooltip)
`icon`	`React.ReactNode`	Icon to display (typically Modus icon)
`onClick`	`() => void`	Callback when action is clicked
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost"`	Button variant style

3D

folder_closed

This is the content area of the side pane. You can put any custom content here.

Details

Version

Size

35.2 MB

Created

Mar 19, 2024 By Julian Oczkowski

Modified

May 07, 2025 By Julian Oczkowski

Permissions

Default project member access

No access

Pablo Borgstein

Full access

UIs