Drawer, also known as Sidebar, is a container component displayed as an overlay.
import { PDrawer } from 'pearkit';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>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>None
Here you can see all the working features for the drawer component.
| Name | Type | Default | Description |
|---|---|---|---|
| status | boolean | true | false | false | State of drawer component |
| close | function | void | Trigger click overlay area |
| children | ReactNode | null | Child node(s) or component(s) for drawer component |
| position | string | left | right | bottom | top | left | Position of drawer component. |