# EuiAppSidebarDrawerComponent

**Type:** component



Expandable drawer component that slides out from the sidebar to display additional content or details.
Provides a secondary panel for contextual information, settings, or extended navigation without leaving the current view.
Manages expanded/collapsed state with corresponding CSS classes for animation and positioning.
Prevents event propagation from drawer content to avoid unintended sidebar interactions.

```html
<!-- Sidebar drawer for user profile details -->
<eui-app>
  <eui-app-sidebar>
    <eui-app-sidebar-header>
      <eui-app-sidebar-header-user-profile
        (toggle)="onSidebarProfileToggle($event)"
        [hasProfileDrawer]="true">
      </eui-app-sidebar-header-user-profile>
    </eui-app-sidebar-header>

    <eui-app-sidebar-drawer [isExpanded]="drawerExpanded">
      <p><strong>User Profile Details</strong></p>
      <p>Additional user information and settings</p>
    </eui-app-sidebar-drawer>

    <eui-app-sidebar-body>
      <eui-app-sidebar-menu [items]="sidebarItems"></eui-app-sidebar-menu>
    </eui-app-sidebar-body>
  </eui-app-sidebar>
</eui-app>
```

```ts
drawerExpanded = false;

onSidebarProfileToggle(event: any): void {
  this.drawerExpanded = !this.drawerExpanded;
}
```

### Accessibility
- Drawer content is keyboard accessible
- Expanded/collapsed state is visually indicated
- Content within drawer maintains focus management
- Event propagation prevented to avoid sidebar conflicts

### Notes
- Must be used within eui-app-sidebar for proper layout integration
- isExpanded controls drawer visibility (default: false)
- Typically toggled via eui-app-sidebar-header-user-profile
- Commonly used for user profile details or extended settings
- Drawer slides out over sidebar content when expanded
- Content is projected via ng-content for flexible composition
- Automatically prevents click events from propagating to sidebar
- Positioned between sidebar header and body in layout
- Includes automatic scroll when content exceeds viewport height


**Selector:** `eui-app-sidebar-drawer`

## Inputs
- **isExpanded**: `boolean` - Controls the expanded/collapsed state of the drawer panel. When true, drawer slides out to display its content. When false, drawer is hidden. Accepts boolean or boolean-coercible values (string 'true'/'false', empty attribute).