@eduzz/apps-toolbar-react

Eduzz Toolbar React

Instalação

$ yarn add @eduzz/apps-toolbar-react

Adicione a fonte padrão no seu HTML (se não houver).

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">

Implementação

const { Action, Apps, User, UserMenuItem, UserMenuDivider, UserMenuContext } = EduzzToolbar;

<EduzzToolbar {...params}>
  // ações customizadas 
  <Action icon={...} onClick={...} />
  <Action icon={...} onClick={...} />

  // apps padrão
  <Apps />

  // usuário atual/ações do usuário
  <User>
    <UserMenuItem icon={...} disabled>Minhas compras</UserMenuItem>
    <UserMenuItem icon={...}>Dados Bancários</UserMenuItem>
    <UserMenuItem icon={...}>Dashboard Elite</UserMenuItem>

    <UserMenuDivider />

    <UserMenuContext>Contas:</UserMenuContext>
    <UserMenuItem icon={...}>John Doe</UserMenuItem>
    <UserMenuItem icon={...} disabled>John Doe 2</UserMenuItem>

    <UserMenuDivider />

    <UserMenuItem>Sair</UserMenuItem>
  </User>
</EduzzToolbar>

Props

Toolbar props.

interface IEduzzToolbarSetupParams {
  application?: typeEduzzToolbarApplications;
  user?: IEduzzToolbarUser;
  disableChat?: boolean;
}

Toolbar.Action props.

interface IEduzzToolbarAction {
  active?: boolean;
  icon?: React.ReactNode;
  label?: React.ReactNode;
  onClick?: (element?: React.MouseEvent<HTMLDivElement>) => void;
}

Toolbar.UserMenuItem props.

interface IEduzzToolbarUserMenuItem {
  icon?: React.ReactNode;
  onClick?: (user: IEduzzToolbarUser, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  disabled?: boolean;
}