### File

`packages/components/layout/eui-app/eui-app-sidebar/sidebar-header-user-profile/sidebar-header-user-profile.component.ts`

### Description

User profile component displayed in the sidebar header showing user information and avatar. Provides visual representation of the logged-in user with optional welcome message, online status, and profile menu integration. Supports impersonation indicators, avatar customization, and optional drawer toggle for expanded profile details. Integrates with EuiUserProfileMenuComponent for dropdown menu functionality.

Example :

    <!-- Basic user profile in sidebar header -->
    <eui-app>
      <eui-app-sidebar>
        <eui-app-sidebar-header>
          <eui-app-sidebar-header-user-profile
            welcomeLabel="Welcome"
            [avatarUrl]="userAvatar"
            [isOnline]="true">
          </eui-app-sidebar-header-user-profile>
        </eui-app-sidebar-header>
      </eui-app-sidebar>
    </eui-app>

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

        <eui-app-sidebar-drawer [isExpanded]="false">
          <p>User profile details</p>
        </eui-app-sidebar-drawer>
      </eui-app-sidebar>
    </eui-app>

Example :

    userAvatar = 'assets/user-avatar.jpg';

    onSidebarProfileToggle(event: any): void {
      console.log('Profile drawer toggled');
    }

### Accessibility

- Avatar provides visual user identification
- hasTabNavigation enables keyboard focus and navigation
- Online status indicator is visually distinct
- Welcome label provides context for screen readers
- Click interaction is keyboard accessible when hasToggle enabled
- Profile menu integration supports keyboard navigation

### Notes

- Must be used within eui-app-sidebar-header for proper layout
- welcomeLabel displays greeting text (default: 'Welcome')
- impersonateLabel shows when user is impersonating (default: 'acting as')
- avatarUrl displays custom avatar image
- isShowUserInfos controls visibility of user text details (default: true)
- isShowAvatarInitials shows initials when no avatar image (default: false)
- isOnline displays online status indicator (default: true)
- hasWelcomeLabel controls welcome message visibility (default: true)
- hasTabNavigation enables keyboard focus (default: false)
- hasToggle enables click toggle functionality (default: false)
- hasProfileDrawer enables drawer mode with expandable content (default: false)
- toggle event emits when profile is clicked with hasToggle or hasProfileDrawer enabled
- Integrates with eui-app-sidebar-drawer for expanded profile details
- Can contain eui-user-profile-menu for dropdown menu functionality

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-app-sidebar-header-user-profile`
imports | `EUI_USER_PROFILE` `EUI_BUTTON` `EUI_ICON`
styleUrls | `./_styles/_index.scss`
templateUrl | `./sidebar-header-user-profile.component.html`

### Index

###### Properties

- Public toggleProfile
- userProfileMenu

###### Methods

- onClick
- onProfileClick

###### Inputs

- avatarUrl
- hasProfileDrawer
- hasTabNavigation
- hasToggle
- hasWelcomeLabel
- impersonateLabel
- isOnline
- isShowAvatarInitials
- isShowUserInfos
- welcomeLabel

###### Outputs

- toggle

###### HostBindings

- class

###### HostListeners

- click

###### Accessors

- cssClasses

### Inputs

avatarUrl
Type : `string`
URL path to the user's avatar image. When provided, displays the image instead of initials or default avatar. Optional.

hasProfileDrawer
Type : `boolean`
Default value : `false`
Enables profile drawer mode with expandable content panel. When true, clicking the profile opens a drawer with additional user details and actions.

hasTabNavigation
Type : `boolean`
Default value : `false`
Enables keyboard tab navigation to the user profile component. When true, makes the profile element focusable and accessible via keyboard.

hasToggle
Type : `boolean`
Default value : `false`
Enables toggle functionality for expanding/collapsing profile details. When true, allows clicking to toggle profile state and emits toggle events.

hasWelcomeLabel
Type : `boolean`
Default value : `true`
Controls visibility of the welcome label text. When false, hides the welcome message prefix and shows only the username.

impersonateLabel
Type : `string`
Default value : `'acting as'`
Text label displayed when user is impersonating another user. Shows between the actual user and impersonated user names, typically "acting as".

isOnline
Type : `boolean`
Default value : `true`
Indicates the user's online status with a visual indicator. When true, displays an online status badge on the avatar.

isShowAvatarInitials
Type : `boolean`
Default value : `false`
Displays user initials in the avatar when no avatar image is provided. When true, shows first letters of user's name as avatar placeholder.

isShowUserInfos
Type : `boolean`
Default value : `true`
Controls visibility of user information text (name, email, etc.). When false, hides textual user details and shows only the avatar.

welcomeLabel
Type : `string`
Default value : `'Welcome'`
Text label displayed before the username in the welcome message. Typically used for greeting text like "Welcome" or "Hello".

### Outputs

toggle
Type : `EventEmitter<any>`
Emitted when the user profile is clicked and toggle functionality is enabled. Payload: any - event data from the click interaction Triggered when hasToggle or hasProfileDrawer is true and the profile is clicked.

### HostBindings

class
Type : `string`

### HostListeners

click
Arguments : `'$event'`
`click(event: MouseEvent)`

### Methods

onClick
`onClick(event: MouseEvent)`
Decorators : `@HostListener('click', ['$event'])`

Parameters :

Name | Type | Optional
event | `MouseEvent` | No

Returns : `void`

onProfileClick
`onProfileClick(event: any)`

Parameters :

Name | Type | Optional
event | `any` | No

Returns : `void`

### Properties

Public toggleProfile
Type : `unknown`
Default value : `false`

userProfileMenu
Type : `QueryList<EuiUserProfileMenuComponent>`
Decorators : `@ContentChildren(undefined)`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""