File

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

Description

Container component for the sidebar header area, typically containing branding, logo, or user profile elements. Automatically registers with EuiAppShellService to calculate and set CSS variables for proper layout spacing. Manages the --eui-app-sidebar-header-height CSS variable to coordinate vertical positioning of sidebar content. Content is projected via ng-content allowing flexible header composition.

<!-- Sidebar header with user profile -->
<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>
</eui-app>

Accessibility

• Provides semantic container for sidebar header content
• Content projection allows flexible accessible structure
• Child components handle their own accessibility features

Notes

• Must be used within eui-app-sidebar for proper layout integration
• Automatically registers with EuiAppShellService on init
• Sets --eui-app-sidebar-header-height CSS variable for layout calculations
• Typically contains eui-app-sidebar-header-user-profile
• Content is projected via ng-content for flexible composition
• Cleans up CSS variables on destroy
• Height is automatically calculated based on content

Implements

OnInit OnDestroy

<ng-content/>