### File

`packages/components/layout/eui-app/eui-app-sidebar/sidebar-drawer/sidebar-drawer.component.ts`

### Description

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.

Example :

    <!-- 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>

Example :

    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

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-app-sidebar-drawer`
templateUrl | `./sidebar-drawer.component.html`

### Index

###### Methods

- Public onSidebarDrawerContentClick

###### Inputs

- isExpanded

###### HostBindings

- class

###### Accessors

- isExpanded
- cssClasses

### Inputs

isExpanded
Type : `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).

### HostBindings

class
Type : `string`

### Methods

Public onSidebarDrawerContentClick
`onSidebarDrawerContentClick(event: Event)`

Parameters :

Name | Type | Optional
event | `Event` | No

Returns : `void`

### Accessors

isExpanded
get `isExpanded()`
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). Returns : `boolean`
set `isExpanded(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""