Collapsible Drawer

The Collapsible Drawer component provides an expandable content container perfect for organizing information in a space-efficient way. Features smooth animations, optional icons, and support for nested content.

Basic Usage

Click the header to expand or collapse content

Code

<CollapsibleDrawer title="Simple Drawer" subtitle="Basic collapsible content">
  <p>This is basic content inside a collapsible drawer.</p>
</CollapsibleDrawer>

API Reference

Props

Prop	Type	Default	Description
`title`	`string`	-	Drawer header title (required)
`subtitle`	`string`	-	Optional subtitle text
`icon`	`string`	-	Optional icon path (without /svg/)
`open`	`boolean`	`false`	Initial expanded state
`class`	`string`	`''`	Additional CSS classes

Content Structure

The drawer consists of three main parts:

Header: Contains title, subtitle, icon, and expand/collapse control
Content: Expandable area for any content when open
Animation: Smooth slide transition using Svelte’s built-in slide transition

Usage Examples

Basic Drawer

<script>
  import CollapsibleDrawer from '$lib/shared/components/overlays/CollapsibleDrawer.svelte';
</script>

<CollapsibleDrawer title="Basic Information" subtitle="Essential details">
  <p>This is the content inside the collapsible drawer.</p>
  <p>You can put any content here including text, forms, or other components.</p>
</CollapsibleDrawer>

Drawer with Icon

<CollapsibleDrawer
  title="User Settings"
  subtitle="Account preferences"
  icon="ui_icons/semantic/user"
>
  <div class="settings-content">
    <h4>Profile Settings</h4>
    <p>Manage your account information and preferences.</p>
    <button>Edit Profile</button>
  </div>
</CollapsibleDrawer>

Pre-opened Drawer

<CollapsibleDrawer
  title="Important Notice"
  subtitle="Please read carefully"
  icon="ui_icons/semantic/warning"
  open={true}
>
  <div class="notice-content">
    <p>This drawer starts in an expanded state.</p>
    <p>Useful for highlighting important information.</p>
  </div>
</CollapsibleDrawer>

Form Content

<CollapsibleDrawer
  title="Contact Form"
  subtitle="Get in touch with us"
  icon="ui_icons/semantic/mail"
>
  <form onsubmit|preventDefault={handleSubmit}>
    <div class="form-field">
      <label>Name</label>
      <input type="text" bind:value={name} />
    </div>
    <div class="form-field">
      <label>Email</label>
      <input type="email" bind:value={email} />
    </div>
    <div class="form-field">
      <label>Message</label>
      <textarea bind:value={message} rows="4"></textarea>
    </div>
    <button type="submit">Send Message</button>
  </form>
</CollapsibleDrawer>

Nested Drawers

<CollapsibleDrawer
  title="Project Management"
  subtitle="Tasks and team"
  icon="ui_icons/semantic/folder"
>
  <CollapsibleDrawer title="Tasks" subtitle="Current work items">
    <div class="task-list">
      <div class="task-item">
        <input type="checkbox" /> Complete user authentication
      </div>
      <div class="task-item">
        <input type="checkbox" checked /> Design system components
      </div>
    </div>
  </CollapsibleDrawer>

  <CollapsibleDrawer title="Team Members" subtitle="Project contributors">
    <div class="team-list">
      <div class="team-member">
        <span>Sarah Johnson - Lead Developer</span>
        <span class="status online">Online</span>
      </div>
      <div class="team-member">
        <span>Mike Chen - UI Designer</span>
        <span class="status away">Away</span>
      </div>
    </div>
  </CollapsibleDrawer>
</CollapsibleDrawer>

Data Visualization

<CollapsibleDrawer
  title="Analytics Dashboard"
  subtitle="Performance metrics"
  icon="ui_icons/semantic/chart"
>
  <div class="analytics-content">
    <div class="stats-grid">
      <div class="stat-card">
        <h4>Users</h4>
        <div class="stat-number">1,247</div>
        <div class="stat-change positive">+12%</div>
      </div>
      <div class="stat-card">
        <h4>Revenue</h4>
        <div class="stat-number">$45,230</div>
        <div class="stat-change positive">+8%</div>
      </div>
    </div>
    <!-- Chart component would go here -->
  </div>
</CollapsibleDrawer>

Media Gallery

<CollapsibleDrawer
  title="Photo Gallery"
  subtitle="Recent uploads"
  icon="ui_icons/semantic/image"
>
  <div class="gallery-grid">
    {#each images as image}
      <div class="gallery-item">
        <img src={image.thumbnail} alt={image.alt} />
        <p>{image.filename}</p>
      </div>
    {/each}
  </div>
  <button class="upload-btn">
    <Icon src="/svg/upload.svg" size={16} />
    Upload Photos
  </button>
</CollapsibleDrawer>

Icon Integration

Icon Path Format

Icons are referenced without the /svg/ prefix:

<!-- Correct -->
<CollapsibleDrawer icon="ui_icons/semantic/user" />

<!-- The component automatically prepends /svg/ -->
<!-- Results in: /svg/ui_icons/semantic/user.svg -->

Common Icon Categories

Semantic: ui_icons/semantic/user, ui_icons/semantic/settings, ui_icons/semantic/folder
Actions: ui_icons/semantic/edit, ui_icons/semantic/delete, ui_icons/semantic/add
Status: ui_icons/semantic/check, ui_icons/semantic/warning, ui_icons/semantic/error

Animation Details

Slide Transition

Uses Svelte’s built-in slide transition
Duration: 200ms for smooth, responsive feel
Easing: Default Svelte easing curve
Hardware accelerated for smooth performance

Interactive States

Hover: Subtle background color change on header
Focus: Keyboard focus indication
Active: Visual feedback when expanding/collapsing

Accessibility Features

Space/Enter: Toggle drawer expansion
Tab: Navigate through interactive content
Arrow Keys: Navigate between drawers (when multiple)

Proper button semantics with role="button"
ARIA states: aria-expanded indicates current state
ARIA controls: aria-controls links header to content
Descriptive labeling for expand/collapse actions

Focus Management

Header button is focusable and keyboard operable
Focus indicators are clearly visible
Content maintains proper tab order when expanded

Design Tokens

The Collapsible Drawer uses the following design tokens:

Typography:
- Title: --typography-subheading-*
- Subtitle: --typography-caption-*
Spacing: --space-1, --space-3, --space-6
Colors: --background, --border, --surface-hover, --surface-subtle
Radius: --radius-lg
Transitions: Standard 0.15s ease transitions