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.

Sidebar

Name	Type	Default	Description
position	'left' 'right'	'right'	Side from which the sidebar will appear.
padding	'base' 'none' 'small'	'base'	The padding properties are used to generate space around an sidebar's content area.
children*	React.ReactNode		The content of the sidebar.
onRemove	object		Callback fired when the component requests to be closed. () => void;
open	boolean	'true'	Determines if the sidebar is shown or not.
needRemoveScroll	boolean	'true'	Determines if RemoveScroll wraps sidebar's children component.
maxWidth	string	'375px'	The maxWidth property specifies the maxWidth of a sidebar's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
zIndex	'100' '200' '300' '400' '500' '600' '700' '800' '900'		The zIndex property specifies the stack order of the sidebar. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

Sidebar.Body

Name	Type	Default	Description
children*	React.ReactNode		The content of the sidebar body.
padding	'base' 'none' 'small'	'base'	The padding properties are used to generate space around an sidebar's body content area.

Sidebar.Footer

Name	Type	Default	Description
children*	React.ReactNode		The content of the sidebar footer.
padding	'base' 'none' 'small'	'base'	The padding properties are used to generate space around an sidebar's footer content area.

Sidebar.Header

Name	Type	Default	Description
children	React.ReactNode		The content of the sidebar header.
title	string		The title to display in the sidebar header.
padding	'base' 'none' 'small'	'base'	The padding properties are used to generate space around an sidebar's header content area.