Drawer #

Drawer, also known as Sidebar, is a container component displayed as an overlay.

import { PDrawer } from 'pearkit';

Basic #

The drawer is controlled through the status and close props via the useState hook. It is also measured by the size of the content.

const [status, setStatus] = useState(false);

<PDrawer status={status} close={() => setStatus(false)}>
    <div className="p-4 w-[300px]">
        <PNav />
    </div>
</PDrawer>

Position #

We have set four different positions for the drawer, of which the left one is the default. The other three are right, bottom and top values.

<PDrawer position="right">
    // Content
</PDrawer>

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the drawer component.

NameTypeDefaultDescription
statusboolean | true | falsefalseState of drawer component
closefunctionvoidTrigger click overlay area
childrenReactNodenullChild node(s) or component(s) for drawer component
positionstring | left | right | bottom | topleftPosition of drawer component.