Drawer

A navegação por drawers fornece acessos para destinos dentro de sua aplicação. As folhas laterais são locais contendo o conteúdo suplementar que é ancorado do lado esquerdo ou direito da tela.

Navegação por drawers (ou "barras laterais") fornecem acesso a destinos e funcionalidades do aplicativo, como por exemplo, a mudança de usuário. Eles podem estar permanentemente na tela ou controlados por um ícone de menu de navegação.

Folhas laterais são superfícies complementares usadas principalmente em tablets e computadores.

Drawer temporário

Drawers de navegação temporária podem alternar entre aberto e fechado. Fechado por padrão, o drawer abre temporariamente acima de todos os outros conteúdos até que uma seção seja selecionada.

O drawer pode ser cancelado clicando na sobreposição ou pressionando a tecla Esc. Fecha quando um item é selecionado, podendo ser manipulado pela propriedade open.

{['left', 'right', 'top', 'bottom'].map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <Drawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor, false)}
    >
      {list(anchor)}
    </Drawer>
  </React.Fragment>
))}

Deslizável

Voê pode fazer um drawer deslizável (swipeable) com o componente SwipeableDrawer.

Este componente vem sobrecarregado com 2 kB gzipped de utilidades. Alguns dispositivos móveis de baixo custo podem não ser capazes de seguir os dedos a 60 FPS. Você pode usar a propriedade disableBackdropTransition para ajudar.

{['left', 'right', 'top', 'bottom'].map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <SwipeableDrawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor, false)}
      onOpen={toggleDrawer(anchor, true)}
    >
      {list(anchor)}
    </SwipeableDrawer>
  </React.Fragment>
))}

As seguintes propriedades são usadas neste site de documentação para otimizar a usabilidade do componente:

iOS está hospedado em dispositivos de última geração. A transição do plano de fundo pode ser ativada sem deixar cair os quadros. O desempenho será suficientemente bom.
O iOS possui um recurso "deslizar para voltar" que interfere com o recurso de descoberta, portanto, a descoberta teve que ser desativada.

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />

Manter montado

Para garantir que um drawer temporário não seja desmontado, especifique a propriedade ModalProps como:

<Drawer
  variant="temporary"
  ModalProps={{
    keepMounted: true,
  }}
/>

Mais detalhes na seção de desempenho Modal.

Drawer responsivo

O componente responsivo Hidden auxilia na exibição de diferentes tipos de drawer, dependendo da largura da tela. Um drawer temporary é exibido para telas pequenas enquanto um drawer permanent é exibido para telas maiores.

Drawer persistente

Drawers de navegação persistente podem alternar entre aberto ou fechado. O drawer, quando exibido, fica no mesmo plano (superfície) que o conteúdo. Ele é fechado por padrão e aberto quando selecionado por um ícone de menu e permanecendo aberto até ser fechado pelo usuário. O estado do drawer é lembrado de ação para ação e de sessão para sessão.

Quando o drawer está fora da grade da página e se abre, o drawer força o outro conteúdo a alterar o tamanho e a adaptar-se à janela de visualização (viewport).

Drawers de navegação persistentes são aceitáveis para todos os tamanhos maiores que os móveis. Não são recomendadas para aplicativos com vários níveis de hierarquia que requerem usar navegação com uma seta para cima.

Variação mini drawer

Nesta variação, o drawer de navegação persistente muda sua largura. Seu estado de recolhido é como um mini-drawer no mesmo plano de elevação do conteúdo, recortado pela barra de aplicativos. Quando expandido, ele aparece da forma padrão de um drawer de navegação persistente.

A variação mini é recomendada para seções de aplicativos que necessitam ser selecionadas por um acesso rápido ao lado do conteúdo.

Drawer permanente

Drawers de navegação permanentes são sempre visíveis e fixados na borda esquerda, na mesma elevação do conteúdo ou plano de fundo. Eles não podem ser fechados.

Aplicativos focados no consumo de informações que usam uma hierarquia da esquerda para a direita.

Navegação em altura total