@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}>
  // ações customizadas
  <EduzzToolbar.Action icon={<AvatarOutline />} />
  <EduzzToolbar.Action icon={<NotificationOutline />} />

  // ações padrões
  <EduzzToolbar.Apps />
  <EduzzToolbar.User menu={...} />
</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.User props.

// menu
interface IEduzzToolbarUserMenu {
  content: React.ReactNode;
  icon?: React.ReactNode;
  onClick?: (user: IEduzzToolbarUser, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  disabled?: boolean;
  hidden?: boolean;
  divider?: 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]'
    }
  };

  const menu: IEduzzToolbarUserMenu[] = [
    {
      content: 'Minhas compras',
      onClick: () => console.log('shopping')
    },
    {
      content: 'Dados cadastrais',
      disabled: true
    },
    {
      content: 'Sumiu!',
      hidden: true
    },
    {
      content: 'Sair',
      divider: true
    }
  ];

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

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