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.