Side Modal

Sidemodal navigation provides access to the parts within its application. The side sections have the supplementary content that is linked on the left or right side of the screen.

import React, { useState } from "react";
import { SideModal } from "@nimbus-ds/patterns";
import { Box, Button, Icon, Text } from "@nimbus-ds/components";
import { CheckCircleIcon, ChevronLeftIcon } from "@nimbus-ds/icons";

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

  const headerAction = (
    <Box display="flex" alignItems="center" gap="1">
      <Icon color="primary-textHigh" source={<ChevronLeftIcon />} />
      <Text fontWeight="bold" fontSize="highlight">
        Formas de entrega
      </Text>
    </Box>
  );

  return (
    <>
      <Button onClick={handleOpen}>Open</Button>
      <SideModal
        onRemove={handleOpen}
        open={open}
        maxWidth={{ xs: "100%", md: "340px", lg: "540px" }}
        title="Instalar Kangu"
        headerIcon={
          <Icon color="primary-textHigh" source={<CheckCircleIcon />} />
        }
        padding="base"
        paddingHeader="none"
        paddingBody="none"
        paddingFooter="none"
        headerAction={headerAction}
        footer={{
          primaryAction: { children: "Button" },
          secondaryAction: { children: "Button", appearance: "primary" },
        }}
      >
        <Box
          borderStyle="dashed"
          borderWidth="1"
          borderColor="neutral-interactive"
          height="100%"
          boxSizing="border-box"
          display="flex"
          justifyContent="center"
          alignItems="center"
        >
          <Text textAlign="center" fontSize="base">
            Replace me with your content
          </Text>
        </Box>
      </SideModal>
    </>
  );
};

export default Example;

Instalá el componente via terminal.

npm install @nimbus-ds/side-modal

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