Drawer

An overlay that slides in from a side of the viewport and behaves either as a dialog or inline element.

Drawer is based on Chakra UI Drawer. See API-reference for Chakra UI Drawer.

The Drawer component is a flexible UI element that allows you to create a side panel or a full-screen panel that slides in from the side of the viewport. Its purpose is to provide a convenient way to display additional content or navigation options that are hidden off-screen by default, and that can be revealed with a swipe or by clicking on a toggle button. The Drawer component is responsive, meaning that it adjusts its appearance and behavior based on the width of the viewport, and it can be used in combination with other UI components to create a cohesive and intuitive user interface.

Open and close state

isOpen and onClose are required props that should be provided from the custom useDisclosure hook. The useDisclosure hook is exposed upon installing the drawer component. See API-reference for Chakra UI useDisclosure for more details.

Basic component usage

import { Button, Drawer, useDisclosure } from "@caspeco/casper-ui-library";

export default function Demo() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>

      <Drawer isOpen={isOpen} onClose={onClose}>
        Here is your drawer content.
        <Button onClick={onClose}>Close</Button>
      </Drawer>
    </>
  );
}

Layout and placement

On top of page (default)

The Drawer is by default a dialog, aboslute positioned on top of all other page contents with an overlay. The Drawer can be placed on the right, left, top, or bottom of the viewport using the placement property.

Inline

When using isInline, the Drawer is placed in the normal document flow and will push sibling content the side when opened. It is not fixed to the left or right side of the viewport, but rather needs to be positioned like any other part of a layout.

In the example below, the Drawer would expand from the right side of the Flex parent container.

import { Button, Drawer, Flex, Text, useDisclosure } from "@caspeco/casper-ui-library";

export default function Demo() {
  const { isOpen, onToggle, onClose } = useDisclosure();
  return (
    <Flex h="100%">
      <Button onClick={onToggle}>Toggle drawer</Button>
      <Text flex={1}>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text>
      <Drawer size="xs" w="320px" isInline isOpen={isOpen} onClose={onClose}>
        <Text>Drawer content</Text>
      </Drawer>
    </Flex>
  );
}