keycloak-scim/src/PageHeader.tsx

import React, { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
        Avatar,
        Button,
        ButtonVariant,
        Brand,
        Dropdown,
        DropdownItem,
        DropdownSeparator,
        DropdownToggle,
        KebabToggle,
        PageHeader,
        PageHeaderTools,
        PageHeaderToolsItem,
        PageHeaderToolsGroup} from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
import { KeycloakContext } from './auth/KeycloakContext';

export const Header = () => {
  return (
    <PageHeader
      showNavToggle
      logo={<Brand src="/logo.svg" alt="Logo" />}
      headerTools={headerTools()}
    />
  );
};

const ManageAccountDropdownItem = () => {
  const keycloak = useContext(KeycloakContext);
  const { t } = useTranslation();
  return (
    <DropdownItem key="manage account" onClick={() => keycloak?.account()}>{t('Manage account')}</DropdownItem>
  );
}

const SignOutDropdownItem = () => {
  const keycloak = useContext(KeycloakContext);
  const { t } = useTranslation();
  return (
    <DropdownItem key="sign out" onClick={() => keycloak?.logout()}>{t('Sign out')}</DropdownItem>
  );
}

const ServerInfoDropdownItem = () => {
  const { t } = useTranslation();
  return (
    <DropdownItem key="server info">{t('Server info')}</DropdownItem>
  )
}

const HelpDropdownItem = () => {
  const { t } = useTranslation();
  const help = t('Help');
  return (
    <DropdownItem><HelpIcon />{` ${help}`}</DropdownItem>
  )
}

const kebabDropdownItems = [
  <ManageAccountDropdownItem key='kebab Manage Account'/>,
  <ServerInfoDropdownItem key='kebab Server Info'/>,
  <HelpDropdownItem key='kebab Help'/>,
  <DropdownSeparator key="kebab sign out seperator" />,
  <SignOutDropdownItem key='kebab Sign out'/>
];

const userDropdownItems = [
    <ManageAccountDropdownItem key='Manage Account'/>,
    <ServerInfoDropdownItem key='Server info'/>,
    <DropdownSeparator key="sign out seperator" />,
    <SignOutDropdownItem key='Sign out'/>
];

const headerTools = () => {
  return (
    <PageHeaderTools>
      <PageHeaderToolsGroup
        visibility={{
          default: 'hidden',
          md: 'visible'
        }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
      >
        <PageHeaderToolsItem>
          <Button aria-label="Help actions" variant={ButtonVariant.plain}>
            <HelpIcon />
          </Button>
        </PageHeaderToolsItem>
      </PageHeaderToolsGroup>

      <PageHeaderToolsGroup>
        <PageHeaderToolsItem
          visibility={{
            md: 'hidden'
          }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
        >
          <KebabDropdown/>
        </PageHeaderToolsItem>
        <PageHeaderToolsItem
          visibility={{
            default: 'hidden',
            md: 'visible'
          }} /** this user dropdown is hidden on mobile sizes */
        >
          <UserDropdown/>
        </PageHeaderToolsItem>
      </PageHeaderToolsGroup>
      <Avatar src="/img_avatar.svg" alt="Avatar image" />
    </PageHeaderTools>
  );
}

const KebabDropdown = () => {
  const [isDropdownOpen, setDropdownOpen] = useState(false);

  const onDropdownToggle = () => {
    setDropdownOpen(!isDropdownOpen);
  };

  return (
    <Dropdown
      isPlain
      position="right"
      toggle={<KebabToggle onToggle={onDropdownToggle} />}
      isOpen={isDropdownOpen}
      dropdownItems={kebabDropdownItems}
    />
  )
}

const UserDropdown = () => {
  const keycloak = useContext(KeycloakContext);
  const [isDropdownOpen, setDropdownOpen] = useState(false);

  const onDropdownToggle = () => {
    setDropdownOpen(!isDropdownOpen);
  };

  return (
    <Dropdown
      isPlain
      position="right"
      isOpen={isDropdownOpen}
      toggle={<DropdownToggle onToggle={onDropdownToggle}>{keycloak?.loggedInUser}</DropdownToggle>}
      dropdownItems={userDropdownItems}
    />
  );
}