DefaultSidebar

The DefaultSidebar is RVE's primary navigation interface, featuring a dual-sidebar layout: a narrow icon rail for main navigation and a wider content area that displays overlay-specific panels. It's designed to be modular. You can disable specific panels, customize the logo, or replace it entirely with your own sidebar implementation.

The sidebar automatically manages state synchronization between selected overlays and active panels, showing contextual back buttons and switching panels based on user interactions. Each panel connects to media adaptors and provides specialized tools for different overlay types.

Key Features

• Dual-sidebar Layout: Icon rail + content panel for efficient space usage
• Panel Management: Automatic switching between overlay-specific panels
• Contextual Navigation: Back button appears when editing selected overlays
• Customizable Branding: Replace logo and footer text
• Selective Panel Disabling: Hide specific overlay types via disabledPanels
• Tooltip Support: Hover tooltips for icon navigation
• State Synchronization: Automatic panel switching when overlays are selected
• Responsive Icons: Optional icon titles for better accessibility

Available Panels

The sidebar includes panels for all major overlay types:

Usage Example

import React from 'react';
import { DefaultSidebar } from '@/app/reactvideoeditor/pro/components/shared/default-sidebar';
import { OverlayType } from '@/app/reactvideoeditor/pro/types';

// Basic usage (within ReactVideoEditorProvider)
export function VideoEditor() {
  return (
    <div className="flex h-screen">
      <DefaultSidebar />
      {/* Main editor content */}
    </div>
  );
}

// Customized sidebar
export function CustomVideoEditor() {
  const customLogo = (
    <img src="/my-logo.svg" alt="My Editor" width={32} height={32} />
  );

  return (
    <div className="flex h-screen">
      <DefaultSidebar
        logo={customLogo}
        footerText="My Video Editor v2.0"
        disabledPanels={[OverlayType.STICKER, OverlayType.TEMPLATE]}
        showIconTitles={false}
      />
      {/* Main editor content */}
    </div>
  );
}

// Within ReactVideoEditor component
<ReactVideoEditor
  projectId="my-project"
  renderer={myRenderer}
  sidebarLogo={<MyLogo />}
  sidebarFooterText="Custom Editor"
  disabledPanels={[OverlayType.LOCAL_DIR]}
  showIconTitles={true}
  // ... other props
/>

Component Structure

DefaultSidebar/
├── Icon Sidebar (Left)
│   ├── Header
│   │   └── Logo/Brand area
│   ├── Content
│   │   └── Navigation icons with tooltips
│   └── Footer
│       └── Settings icon
└── Content Sidebar (Right)
    ├── Header
    │   ├── Panel title
    │   └── Back button (contextual)
    └── Content
        └── Active panel component

Panel Components

Each panel is a specialized component that handles its overlay type:

• VideoOverlayPanel: Video search, preview, and timeline addition
• TextOverlaysPanel: Text templates, fonts, and styling
• SoundsOverlayPanel: Audio search, preview, and waveform management
• CaptionsOverlayPanel: Subtitle editing and timing controls
• ImageOverlayPanel: Image search, filters, and positioning
• StickersPanel: Sticker categories and emoji selection
• LocalMediaPanel: File upload and local media management
• TemplateOverlayPanel: Pre-built template browsing and application
• SettingsPanel: Editor preferences and configuration

Props

State Management

The sidebar uses two main contexts:

EditorSidebar Context

const { activePanel, setActivePanel, setIsOpen } = useEditorSidebar();

• activePanel: Currently displayed panel (OverlayType)
• setActivePanel: Switch to a different panel
• setIsOpen: Control sidebar visibility

Editor Context

const { setSelectedOverlayId, selectedOverlayId, overlays } = useEditorContext();

• selectedOverlayId: Currently selected overlay for editing
• setSelectedOverlayId: Select/deselect overlays
• overlays: All overlays in the project

Contextual Behavior

The sidebar includes smart contextual features:

Back Button Logic

const shouldShowBackButton = selectedOverlay && selectedOverlay.type === activePanel;

A back button appears in the panel header when:

1. An overlay is selected (selectedOverlay exists)
2. The selected overlay's type matches the active panel
3. Clicking it deselects the overlay (setSelectedOverlayId(null))

Panel Auto-switching

When an overlay is selected (e.g., from the timeline), the sidebar automatically:

1. Switches to the appropriate panel for that overlay type
2. Opens the sidebar if it's closed
3. Shows overlay-specific editing controls

Customization

Replacing the Entire Sidebar

<ReactVideoEditor
  customSidebar={<MyCustomSidebar />}
  // ... other props
/>

Selective Panel Disabling

// Hide stickers and templates
<DefaultSidebar
  disabledPanels={[OverlayType.STICKER, OverlayType.TEMPLATE]}
/>

Icon-only Mode

// Minimal icon rail without text labels
<DefaultSidebar showIconTitles={false} />

Responsive Behavior

• Desktop: Full dual-sidebar layout with hover tooltips
• Mobile: Automatically replaced by MobileNavBar with bottom sheet panels
• Collapsible: Icon sidebar can collapse to save space
• Tooltip Fallback: Icons show tooltips when titles are hidden

Integration Notes

• Must be used within ReactVideoEditorProvider for context access
• Automatically connects to media adaptors for panel content
• Respects theme settings and CSS custom properties
• Works with keyboard navigation and accessibility features

Next Steps

• Explore individual overlay panels and their capabilities
• Learn about media adaptors and how to configure them
• Understand the editor context and overlay management
• Customize the sidebar for your specific use case