LayoutHeaderGlobalBar

LayoutHeaderGlobalBar

The LayoutHeaderGlobalBar component provides global action buttons in the application header, including theme toggle and user profile access with contextual district/client display.

Props

This component does not accept any props. It manages its own state through context hooks.

Usage

import LayoutHeaderGlobalBar from '@/components/Layout/LayoutHeader/LayoutHeaderGlobalBar';

// Typically used within LayoutHeader
<Header>
  <LayoutHeaderGlobalBar />
</Header>

Features

Global Actions

1. Theme Toggle: Switch between light and dark modes
2. User Profile: Access user settings and preferences with avatar display

Conditional Display Logic

The component displays different information based on the user's identity provider:

• BCeID Business Users (BCEIDBUSINESS): Shows ClientDisplay
• IDIR Users: Shows DistrictDisplay

User Avatar

Displays a small avatar with user initials extracted from first and last name.

Structure

<HeaderGlobalBar>
  <HeaderGlobalAction> {/* Theme */}
    <ThemeToggle />
  </HeaderGlobalAction>
  
  <HeaderGlobalAction> {/* Profile */}
    <AvatarImage />
    {user?.idpProvider === 'BCEIDBUSINESS' ? (
      <ClientDisplay />
    ) : (
      <DistrictDisplay />
    )}
  </HeaderGlobalAction>
</HeaderGlobalBar>

State Management

Layout State

const { toggleHeaderPanel, isHeaderPanelOpen } = useLayout();

• toggleHeaderPanel: Opens/closes the user profile panel
• isHeaderPanelOpen: Boolean indicating panel state

User State

const { user } = useAuth();

Accesses user information including:

• First name
• Last name
• Identity provider type

Profile Action Button

The user profile button includes:

Visual Elements

• User avatar with initials
• Selected client/district name (if applicable)
• Chevron icon indicating panel state

Interactive Behavior

• Click to toggle profile panel
• Active state styling when panel is open
• Tooltip alignment: end

Conditional Content

{user?.idpProvider === 'BCEIDBUSINESS' ? (
  <ClientDisplay isActive={isHeaderPanelOpen} />
) : (
  <DistrictDisplay isActive={isHeaderPanelOpen} />
)}

Styling

Profile Action Button

.profile-action-button {
  width: fit-content;
  max-width: none;
  color: white;
  padding: 0.75rem;
  margin-left: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

Active State

&.header__action--active {
  color: var(--layer-selected-inverse);
}

Global Bar Styles

.header__global {
  button.header__action {
    border-radius: 0;
  }
  
  button.header__action--active {
    background: var(--layer-02);
    border: 0;
  }
}

Design Tokens

• Default text color: colors.$white
• Active color: --layer-selected-inverse
• Background (active): --layer-02
• Icon fill: currentColor

Accessibility

ARIA Labels

• Theme action: aria-label="Theme"
• Profile action: aria-label="User settings"

Tooltip Alignment

Both actions use tooltipAlignment="end" for consistent positioning.

Focus Management

• Proper focus states for keyboard navigation
• No outline on focus (handled by Carbon)

Dependencies

Required Context Providers

• LayoutProvider: For panel state management
• AuthProvider: For user information
• ThemeProvider: For theme toggle functionality
• PreferenceProvider: For client/district preferences

Sub-Components

• ThemeToggle: Theme switching control
• AvatarImage: User avatar display
• ClientDisplay: Business client information
• DistrictDisplay: District information

Carbon Components

• HeaderGlobalBar: Container for global actions
• HeaderGlobalAction: Individual action button wrapper

Identity Provider Logic

BCeID Business

Shows client selection for business users:

user?.idpProvider === 'BCEIDBUSINESS'

IDIR

Shows district selection for government users:

// All non-BCeID users default to DistrictDisplay

Integration Example

import { Header, HeaderGlobalBar, HeaderGlobalAction } from '@carbon/react';
import { LayoutProvider } from '@/context/layout/LayoutProvider';
import { AuthProvider } from '@/context/auth/AuthProvider';
import LayoutHeaderGlobalBar from '@/components/Layout/LayoutHeader/LayoutHeaderGlobalBar';

function AppHeader() {
  return (
    <AuthProvider>
      <LayoutProvider>
        <Header>
          {/* Other header elements */}
          <LayoutHeaderGlobalBar />
        </Header>
      </LayoutProvider>
    </AuthProvider>
  );
}

Related Components

• LayoutHeader: Parent header component
• ThemeToggle: Theme switching control
• AvatarImage: User avatar display
• ClientDisplay: Client selection display
• DistrictDisplay: District selection display
• LayoutHeaderPanel: Profile panel that opens on click

Best Practices

1. Context Order: Ensure AuthProvider wraps LayoutProvider
2. Single Instance: Use only one global bar per header
3. Consistent Placement: Keep in the same position across all pages
4. Accessibility: Maintain ARIA labels and keyboard support

User Experience

Theme Toggle Flow

1. User clicks theme icon
2. Theme switches immediately
3. Preference persists across sessions

Profile Access Flow

1. User clicks profile button
2. Panel slides in from right
3. Shows user info and preferences
4. Click outside or close button to dismiss

Notes

• The component adapts based on user identity provider
• Profile button shows different information for different user types
• All state is managed through context providers
• Follows BC Government design patterns