Drawer

The Drawer component opens a side overlay on the left or right of the screen.

It's best used for things like mobile navigation menus or sidebars.

Uses the Reach UI Modal component to cover accessibility requirements.

Usage#

Copy
import {
  Drawer,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
  useDisclosure,
} from 'minerva-ui';

Open Drawer
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>
      <Drawer isOpen={isOpen} onClose={onClose} overflow="hidden">
        <DrawerHeader onClose={onClose}>Hello World!</DrawerHeader>
        <DrawerBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
        </DrawerBody>
        <DrawerFooter bg="gray.50">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </DrawerFooter>
      </Drawer>
    </>
  );
};
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>
      <Drawer isOpen={isOpen} onClose={onClose} overflow="hidden">
        <DrawerHeader onClose={onClose}>Hello World!</DrawerHeader>
        <DrawerBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
        </DrawerBody>
        <DrawerFooter bg="gray.50">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </DrawerFooter>
      </Drawer>
    </>
  );
};

Drawer Placement#

Drawer can be positioned to the left or right of the screen.

Open Drawer
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>
      <Drawer
        placement="left"
        isOpen={isOpen}
        onClose={onClose}
        overflow="hidden"
      >
        <DrawerHeader onClose={onClose}>Hello World!</DrawerHeader>
        <DrawerBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
          Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor
          esse quis. Sunt ad dolore quis aute consequat.
        </DrawerBody>
        <DrawerFooter bg="gray.50">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </DrawerFooter>
      </Drawer>
    </>
  );
};
() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Drawer</Button>
      <Drawer
        placement="left"
        isOpen={isOpen}
        onClose={onClose}
        overflow="hidden"
      >
        <DrawerHeader onClose={onClose}>Hello World!</DrawerHeader>
        <DrawerBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
          Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor
          esse quis. Sunt ad dolore quis aute consequat.
        </DrawerBody>
        <DrawerFooter bg="gray.50">
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </DrawerFooter>
      </Drawer>
    </>
  );
};

Animations#

Animations are included by default in the <GlobalStyles /> component:

Copy
@keyframes slideright {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes slideleft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
[data-minerva-drawer='left'] {
  animation: slideright 0.18s;
}
[data-minerva-drawer='right'] {
  animation: slideleft 0.18s;
}

Props#

Props are the same as the <Modal /> component, with the addition of placement.

<Drawer />#

<DrawerHeader />#

<DrawerBody /> and <DrawerFooter />#