Sidebar

El componente Sidebar es un contenedor flotante de tamaño grande que entra a la página desde los lados. Nos permite exponer acciones, formularios o secciones con mucha información sobre el contexto de una 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 en Figma

Anatomía del componente

Se compone de un fondo traslúcido a pantalla completa y un contenedor flotante que ocupa el alto completo de la pantalla y un ancho fijo, con sombra y un padding opcional.

En desktop tiene un ancho fijo y ocupa el alto completo; en mobile ocupa la pantalla completa.

Guidelines

Utilizamos el Sidebar para exponer acciones, diálogos o formularios que se abren sobre el contexto de una página, cuando estos son demasiado extensos para usar un Modal, pero la información es lo suficientemente relevante para no navegar hacia otra página.

Si bien es un componente flotante, bloquea parcialmente la vista del fondo, por lo que debería usarse escasamente.

Recomendaciones de uso

Crear un menú para una aplicación
Presentar una lista de filtros con muchas opciones
Presentar una lista interactiva con muchas entradas y un buscador

Componentes relacionados

Modal - Es un elemento flotante que nos permite presentar a la persona usuaria con acciones o mensajes de confirmación breves.
Popover - Es un elemento flotante que puede ser usado para presentar información o acciones de forma poco intrusiva.

Implementación

Instalá el 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.