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;
}