Sidebar

O componente Sidebar é um conteiner flutuante grande que entra na página desde os cantos. Nos permite apresentar ações, forms ou seções com muita informação sobre o contexto da página.

import React, { useState } from "react";
import { Box, Sidebar, Text, Button } from "@nimbus-ds/components";

const Example: React.FC = () => {
  const [open, setOpen] = useState(false);
  const toggleOpen = () => setOpen((prevState) => !prevState);

  return (
    <>
      <Button onClick={toggleOpen}>Open</Button>
      <Sidebar open={open} onRemove={toggleOpen}>
        <Box
          alignItems="center"
          borderColor="neutral-interactive"
          borderStyle="dashed"
          borderWidth="1"
          boxSizing="border-box"
          display="flex"
          height="100%"
          justifyContent="center"
          padding="2"
        >
          <Text fontSize="base" textAlign="center">
            Replace me with your content
          </Text>
        </Box>
      </Sidebar>
    </>
  );
};

export default Example;

Ver no Figma

Anatomia do componente

O componente é composto por um fundo translúcido a tela completa e um conteiner flutuante que ocupa toda a altura da tela e uma largura fixa, com sombra e um padding opcional.

No desktop tem uma largura fixa e ocupa o alto completo, no mobile ocupa a tela completa.

Guidelines

Usamos o Sidebar para apresentar ações, diálogos ou formularios que abrem sobre o contexto da página, quando eles são muito longos para usar num Modal, mas a informação é o suficientemente relevante para não navegar para outra página.

Apesar de ser um componente flutuante, ele bloqueia parcialmente a vista do fundo, porém deve ser usado com moderação.

Recomendações de uso

Criar um menu para um aplicativo
Apresentar uma lista de filtros com muitas opções
Apresentar uma lista interativa com muitas entradas e um buscador

Componentes relacionados

Modal - É um elemento flutuante que nos permite apresentar ações ou mensagems de confirmação breves para o usuario.
Popover - É um elemento flutuante que pode ser usado para apresentar informações ou ações de forma não intrusiva.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/sidebar

Props

Additional props are passed to the <Sidebar> element. See div docs for a list of props accepted by the <Sidebar> element.