@eduzz/apps-toolbar-react

Eduzz Toolbar React

Instalação

$ yarn add @eduzz/apps-toolbar-react

Adicione a fonte padrão no seu HTML.

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

Implementação

<EduzzToolbar {...params}>
  <EduzzToolbar.Action icon={...} onClick={...} />
  <EduzzToolbar.Action icon={...} onClick={...} />

  <EduzzToolbar.Apps />

  <EduzzToolbar.User>
    <EduzzToolbar.UserMenuItem icon={...} disabled>Minhas compras</EduzzToolbar.UserMenuItem>
    <EduzzToolbar.UserMenuItem icon={...}>Dados Bancários</EduzzToolbar.UserMenuItem>
    <EduzzToolbar.UserMenuItem icon={...}>Dashboard Elite</EduzzToolbar.UserMenuItem>

    <EduzzToolbar.UserMenuDivider />

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

    <EduzzToolbar.UserMenuDivider />

    <EduzzToolbar.UserMenuItem>Sair</EduzzToolbar.UserMenuItem>
  </EduzzToolbar.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;
}

Desenvolvimento local

No arquivo src/index.tsx implemente o código abaixo.

function DevApp() {
  const params: IEduzzToolbarSetupParams = {
    application: 'blinket',
    disableChat: true,
    user: {
      id: 1,
      name: 'John Doe',
      email: '[e-mail]'
    }
  };

  return (
    <EduzzToolbar {...params}>
      <EduzzToolbar.Apps />
      <EduzzToolbar.User />
    </EduzzToolbar>
  );
}

ReactDOM.render(<DevApp />, document.getElementById('root'));