Drawer Component

ℹ️

The Drawer component is a versatile and customizable React component for creating flexible drawers or sidebars that can be easily toggled open or closed. It includes an associated Drawer.Toggle component for controlling the drawer's visibility. This component is inspired by the DaisyUI (opens in a new tab) framework's design for drawer.

Example Preview

Drawer Example

Usage

import { Drawer } from "@/@core";
 
// Render Drawer component with associated Drawer.Toggle component
const MyDrawerComponent = () => {
  return (
    <>
      <Drawer
        id="exampleDrawer"
        direction="right"
        className="custom-drawer"
        bodyClassName="custom-body"
      >
        {/* Your content or layout here */}
      </Drawer>
      <Drawer.Toggle id="exampleDrawer" className="btn btn-primary">
        Open Drawer
      </Drawer.Toggle>
    </>
  );
};
 
export default MyDrawerComponent;

Props Table

Prop name	Type	Default value	Required	Description
`children`	`ReactNode`	-	Yes	Content to display within the drawer.
`id`	`string`	-	Yes	Unique identifier for the Drawer component.
`direction`	`'left'` or `'right'`	`'left'`	No	Direction from which the drawer will appear.
`className`	`string`	-	No	Additional CSS classes for the main Drawer component.
`bodyClassName`	`string`	-	No	Additional CSS classes for the drawer's body (sidebar) content.
`...props`	`HTMLAttributes<HTMLDivElement>`	-	No	Additional HTML attributes for the main `div` element.

Drawer.Toggle

Prop name	Type	Required	Description
`children`	`string`	Yes	Text or content to display within the toggle.
`id`	`string`	Yes	Unique identifier associated with the Drawer component.
`...props`	`HTMLAttributes<HTMLLabelElement>`	No	Additional HTML attributes for the `label` element.

Example

Here is an example of using the Drawer component with the associated Drawer.Toggle component:

<Drawer id="exampleDrawer" direction="right" className="custom-drawer" bodyClassName="custom-body">
   {/* Your content or layout here */}
</Drawer>
<Drawer.Toggle id="exampleDrawer" className="btn btn-primary">
   Open Drawer
</Drawer.Toggle>

This will render a drawer that can be toggled open or closed using the associated toggle button. Customize the content, direction, and styling as needed.

ℹ️

Note: The Drawer component is a versatile React component designed to create interactive drawers or side panels for enhancing user experience. It supports various configurations, animations, and positions to suit different layout needs. This component is inspired by the DaisyUI (opens in a new tab) framework's design for drawers. Check it out for more awesome components.

Divider Faqs