@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 copie e cole o código abaixo.

import ReactDOM from 'react-dom';

import EduzzToolbar from './App';
import { IEduzzToolbarSetupParams } from './interfaces';

const { Apps, User, UserMenuItem: MenuItem, IconMenu, UserMenuDivider: Divider } = EduzzToolbar;

function DevApp() {
  function toggleMobileMenu() {
    console.log('toggle menu');
  }

  const params: IEduzzToolbarSetupParams = {
    application: 'blinket',
    disableChat: true,
    user: {
      id: 1,
      name: 'EDUZZ TECNOLOGIA E DESENVOLVIMENTO',
      email: '[e-mail]',
      belt: 'Red Belt'
    }
  };

  return (
    <EduzzToolbar {...params}>
      <IconMenu onClick={toggleMobileMenu} />

      <Apps />

      <User>
        <MenuItem>Meus Dados</MenuItem>
        <MenuItem>Minhas Compras</MenuItem>
        <Divider />
        <MenuItem>Sair</MenuItem>
      </User>
    </EduzzToolbar>
  );
}

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

export default EduzzToolbar;