Layout#

Estrutura padrão das aplicações.

Importação#

ts
1
import Layout from '@eduzz/houston-ui/Layout';
2

3
// ou
4
import Layout from '@eduzz/houston-ui/Layout';
5
import Sidebar from '@eduzz/houston-ui/Layout/Sidebar';
6
import Topbar from '@eduzz/houston-ui/Layout/Topbar';
7
import Content from '@eduzz/houston-ui/Layout/Content';

Estrutura base#

jsx
1
<Layout>
2
  <Layout.Topbar />
3
  <Layout.Sidebar />
4
  <Layout.Content />
5
</Layout>

Desestruturando#

Para simplificar a escrita do código, você pode desestruturar os componentes.

jsx
1
import Layout from '@eduzz/houston-ui/Layout';
2

3
const { Sidebar, Topbar, Content } = Layout;
4
const { Item, Group } = Sidebar;
5

6
function CustomLayout() {
7
  return (
8
    <Layout>
9
      <Topbar {...topbarProps}>
10
        {...}
11
      </Topbar>
12

13
      <Sidebar {...sidebarProps}>
14
        {...}
15
      </Sidebar>
16

17
      <Content>
18
        {...}
19
      </Content>
20
    </Layout>
21
  );
22
}
23

24
export default CustomLayout;

Exemplo#

jsx
1
import { NavLink, useLocation } from 'react-router-dom';
2

3
const { Sidebar, Topbar, Content } = Layout;
4
const { Item, Group } = Sidebar;
5

6
function MyComponent() {
7
  const location = useLocation();
8

9
  return (
10
    <Layout>
11
      <Topbar
12
        currentApplication='orbita'
13
        user={{
14
          name: 'Houston User',
15
          belt: 'Black Belt',
16
          avatar: 'https://picsum.photos/200',
17
          tag: 'unity'
18
        }}
19
      >
20
        <Topbar.UnitySupportChat />
21

22
        <Topbar.Action icon={<NotificationOutline size={25} />} label='Notificações' />
23
        <Topbar.Action icon={<InfoChatOutline size={25} />} />
24

25
        <Topbar.UserMenu>
26
          <Topbar.UserMenuItem>Meus Dados</Topbar.UserMenuItem>
27
          <Topbar.UserMenuItem>Minhas Compras</Topbar.UserMenuItem>
28

29
          <Topbar.UserMenuGroup label='Contas:'>
30
            <Topbar.UserMenuItem href='http://google.com' target='_blank'>
31
              John Doe
32
            </Topbar.UserMenuItem>
33
            <Topbar.UserMenuItem disabled>John Doe 2</Topbar.UserMenuItem>
34
          </Topbar.UserMenuGroup>
35

36
          <Topbar.UserMenuDivider />
37

38
          <Topbar.UserMenuItem>Sair</Topbar.UserMenuItem>
39
        </Topbar.UserMenu>
40
      </Topbar>
41

42
      <Sidebar currentLocation={location.pathname}>
43
        <Item href='/agendamento'>Resumo</Item>
44

45
        <Group label='Agendamento'>
46
          <Item as={NavLink} to='/agendamento'>
47
            Evento
48
          </Item>
49
          <Item as={NavLink} to='/agendamento'>
50
            MasterMind
51
          </Item>
52
          <Item as={NavLink} to='/agendamento'>
53
            Lançamento
54
          </Item>
55
        </Group>
56

57
        <Item disabled>Marketplace</Item>
58
      </Sidebar>
59

60
      <Content>{/*Your content here*/}</Content>
61
    </Layout>
62
  );
63
}

Props#

prop	tipo	obrigatório	padrão	descrição
logo	`url`	`false`	-	Url para o logo padrao.
logoMobile	`url`	`false`	-	Url para o logo na versão mobile.
currentApplication	`string`	`false`	-	Aplicação que está sendo usada, para marcar no menu de apps
user	`object`	`false`	-	Se existe um usuário logado, sem ele não terá o menu User

Topbar.Action props#

prop	tipo	obrigatório	padrão	descrição
icon	`ReactNode`	`true`	-	Icone, tamanho ideal 25
label	`string`	`false`	-
isActive	`boolean`	`false`	`false`	Se o icone deve manter o estado de pressionado/ativo
onClick	`function`	`false`	-

Topbar.UserMenuItem props#

prop	tipo	obrigatório	padrão	descrição
icon	`ReactNode`	`true`	-	Icone, tamanho ideal 25
children	`string`	`false`	-	Deve ser uma string
disabled	`boolean`	`false`	-
onClick	`function`	`false`	-

Topbar.UserMenuGroup props#

prop	tipo	obrigatório	padrão	descrição
label	`string`	`true`	-
children	`ReactNode`	`true`	-

prop	tipo	obrigatório	padrão	descrição
currentLocation	`string`	`false`	-	Caminho de localização atual (pathname).

Sidebar.Item props#

prop	tipo	obrigatório	padrão	descrição
as	`React.ElementType`	`false`	-	Componente que envolve o item.
`any`	`any`	`false`	-	Qualquer prop que o `as` receba
isActive	`boolean`	`false`	`false`	Irá usar o `currentLocation` fornecido para tentar ver se está ativo ou não
tabIndex	`number`	`false`	-
disabled	`boolean`	`false`	-
onClick	`function`	`false`	-