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

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

Drawer Placement

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

Animations

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

@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 />

NameTypeIs RequiredDefaultDescription
isOpenbooleanrequiredfalseSets if Drawer is open
onClosefunctionoptionalnoneAction to take when Drawer is closed
placementleft or rightoptionalrightControl placement of drawer on screen

<DrawerHeader />

NameTypeIs RequiredDefaultDescription
onClosefunctionoptionalnoneAction to take when Drawer is closed
childrennodeoptionalnone

<DrawerBody /> and <DrawerFooter />

NameTypeIs RequiredDefaultDescription
childrennodeoptionalnone