Drawer

The Drawer component is often referred to as a off-canvas menu or side menu, it is used to display content in a hidden toggleable sidebar.

---

Usage

import { Drawer, Button } from '@newfold/ui-component-library';

const [isOpen, setIsOpen] = useState(false);

<>
    <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
    <Drawer isOpen={ isOpen } onClose={ () => setIsOpen(false) }>
        <Drawer.Panel>
            <Drawer.Header
                title="Menu"
                hasCloseButton={ true }
            />
            <div className="nfd-flex nfd-flex-col nfd-gap-4 nfd-min-w-56 nfd-pt-4">
                <a>Home</a>
                <a>About</a>
                <a>Services</a>
                <a>Blog</a>
                <a>Contact</a>
            </div>
        </Drawer.Panel>
    </Drawer>
</>

info

In order to user the Drawer component, you must wrap its content in a Drawer.Panel sub-component.

---

Variants

The Drawer component offers two variants: classic and offset.

Classic

The classic variant is the default variant.

<Drawer variant="classic">
    <Drawer.Panel>
        ...
    </Drawer.Panel>
</Drawer>

Offset

The offset variant renders the drawer with spacing around the panel.

<Drawer variant="offset">
    <Drawer.Panel>
        ...
    </Drawer.Panel>
</Drawer>

---

Position

The Drawer component offers two positions: left and right.

Right

The right position is the default position. It will render the drawer on the right side of the page.

<Drawer position="right">
    <Drawer.Panel>
        ...
    </Drawer.Panel>
</Drawer>

Left

The left position will render the drawer on the left side of the page.

<Drawer position="left">
    <Drawer.Panel>
        ...
    </Drawer.Panel>
</Drawer>

---

Props

Attribute	Type	Description	Default
isOpen*	boolean |	Whether the drawer is open or not.	-
onClose*	function |	Callback function to be called when the drawer is closed.	-
variant	classic | offset |	The variant of the drawer.	classic
position	left | right |	The position of the drawer.	right
overlay	boolean |	Whether the drawer has an overlay or not.	true
className	string |	The class name of the drawer.	-
children*	<Drawer.Panel> |	The content of the drawer.	-

---

Drawer.Panel

The Drawer.Panel component is used to wrap the content of the drawer.

import { Drawer } from "@newfold/ui-component-library";

<Drawer>
    <Drawer.Panel>
        ...
    </Drawer.Panel>
</Drawer>

---

Drawer.Panel Props

Attribute	Type	Description	Default
className	string |	The class name of the drawer panel.	-
children	node |	The content of the drawer panel.	-

---

Drawer.Header

The Drawer.Header component is used to an optional header to the drawer. The header offers a title and a close button.

import { Drawer } from "@newfold/ui-component-library";

<Drawer>
    <Drawer.Panel>
        <Drawer.Header
            title="Menu"
            titleAs="h2"
            titleSize="4"
            hasCloseButton={ true }
            closeButtonScreenReaderText="Close"
        />
        ...
    </Drawer.Panel>
</Drawer>

---

Drawer.Header Props

Attribute	Type	Description	Default
title	string |	The title of the drawer header.	-
titleAs	string |	The HTML tag to use for the title.	h2
titleSize	string |	The size of the title.	4
hasCloseButton	boolean |	Whether the drawer header has a close button or not.	true
closeButtonScreenReaderText	string |	The screen reader text for the close button.	Close
className	string |	The class name of the drawer header.	-