# EuiAppSidebarHeaderUserProfileComponent

**Type:** component



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.

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

```ts
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


**Selector:** `eui-app-sidebar-header-user-profile`

## Inputs
- **avatarUrl**: `string` - URL path to the user's avatar image. When provided, displays the image instead of initials or default avatar. Optional.
- **hasProfileDrawer**: `boolean` - Enables profile drawer mode with expandable content panel. When true, clicking the profile opens a drawer with additional user details and actions.
- **hasTabNavigation**: `boolean` - Enables keyboard tab navigation to the user profile component. When true, makes the profile element focusable and accessible via keyboard.
- **hasToggle**: `boolean` - Enables toggle functionality for expanding/collapsing profile details. When true, allows clicking to toggle profile state and emits toggle events.
- **hasWelcomeLabel**: `boolean` - Controls visibility of the welcome label text. When false, hides the welcome message prefix and shows only the username.
- **impersonateLabel**: `string` - Text label displayed when user is impersonating another user. Shows between the actual user and impersonated user names, typically "acting as".
- **isOnline**: `boolean` - Indicates the user's online status with a visual indicator. When true, displays an online status badge on the avatar.
- **isShowAvatarInitials**: `boolean` - 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**: `boolean` - Controls visibility of user information text (name, email, etc.). When false, hides textual user details and shows only the avatar.
- **welcomeLabel**: `string` - Text label displayed before the username in the welcome message. Typically used for greeting text like "Welcome" or "Hello".

## Outputs
- **toggle**: `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.