Sidebar Sections

Modular sidebar section components for the document builder.

Overview

The document builder sidebar is composed of multiple section components, each providing a specific content type or tool.

Available Sections

SidebarImagesSection

Displays project images that can be dragged onto the document canvas. Supports:

• Browse uploaded project images
• Upload new images
• Drag-and-drop to canvas
• Image preview thumbnails

Source: app/components/document-builder/sidebar/SidebarImagesSection.vue

SidebarStatsSection

Displays project statistics as draggable data blocks. Supports:

• Match completion statistics
• PIP item counts
• Spec coverage metrics
• Progress charts

Source: app/components/document-builder/sidebar/SidebarStatsSection.vue

Adding New Sections

To add a new sidebar section:

1. Create a new component in app/components/document-builder/sidebar/
2. Follow the naming convention: Sidebar*Section.vue
3. Import and register in DocumentBuilderSidebar.vue
4. Implement drag data for canvas block creation