Sidebar

The Sidebar renders a vertical strip of icon buttons for switching between the app's tool panels (Media, Video, Text, Effects, etc.). It highlights the active panel and exposes the selection via a controlled or uncontrolled callback.

Live Example

Usage

import { Sidebar } from '@timelinx/ui';
import { useState } from 'react';

function EditorLayout() {
  const [active, setActive] = useState('media');

  return (
    <Sidebar
      activePanel={active}
      onPanelChange={setActive}
    />
  );
}

Props

Standalone

Sidebar is a standalone component - no context providers needed. All state is managed via props.