);
};
```
### Without Toolbar
```tsx
import React, { useState } from 'react';
import Button from '@leafygreen-ui/button';
import { DisplayMode, Drawer, DrawerLayout } from '@leafygreen-ui/drawer';
function App() {
const [open, setOpen] = useState(false);
return (
Drawer content}
onClose={() => setOpen(false)}
>
);
}
```
## DrawerLayout
`DrawerLayout` is a flexible layout wrapper that shifts the page content appropriately when a `Drawer` opens. It can be used in both `overlay` and `embedded` modes, with or without a toolbar.
### With `Toolbar`
To use with a `Toolbar`, pass the `toolbarData` prop to render the `Toolbar` items and the `Drawer` content. Each object in the array defines a `Toolbar` item. If a `Toolbar` item is intended to perform an action other than opening a `Drawer` (for example, opening a modal), leave the `content` and `title` fields empty.
The `Drawer` and `Toolbar` component will be rendered automatically based on the `toolbarData` provided.
#### Toolbar Visibility
Individual toolbar items can be controlled using the `visible` prop. When all toolbar items have `visible` set to `false`, the entire toolbar will be automatically hidden from view. This allows for dynamic toolbar management based on application state or user permissions.
### `useDrawerToolbarContext()`
To control the `Drawer` state, use the `useDrawerToolbarContext` hook from within ``. This hook provides the `openDrawer()` and `closeDrawer()` functions to open and close the drawer programmatically. The hook takes no arguments and returns the following functions:
| Name | Signature | Description |
| ------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| openDrawer | `(id: string) => void` | Opens the `Drawer` associated with the `Toolbar` item that has the matching `id` in `toolbarData`. |
| closeDrawer | `() => void` | Closes the `Drawer`. |
| toggleDrawer | `(id: string) => void` | If clicking the currently active `Toolbar` item, it closes the `Drawer`. Otherwise, it open the `Drawer` with the new content. |
### Rendering
```tsx
import React, { useState } from 'react';
import Button from '@leafygreen-ui/button';
import {
DrawerLayout,
DrawerLayoutProps,
useDrawerToolbarContext,
} from '@leafygreen-ui/drawer';
// Data passed to to render the toolbar items and drawer content
const DRAWER_TOOLBAR_DATA: DrawerLayoutProps['toolbarData'] = [
{
id: 'Code',
label: 'Code',
content: ,
title: 'Code Title',
glyph: 'Code',
onClick: () => {
console.log('Code clicked');
},
},
{
id: 'Dashboard',
label: 'Dashboard',
content: ,
title: 'Dashboard Title',
glyph: 'Dashboard',
onClick: () => {
console.log('Dashboard clicked');
},
},
{
id: 'Plus',
label: "Perform some action, doesn't open a drawer",
glyph: 'Plus',
onClick: () => {
console.log('Plus clicked, does not update drawer');
},
},
];
const Component = () => {
const Main = () => {
const { openDrawer, closeDrawer } = useDrawerToolbarContext();
// Content is a placeholder for your application's main content
const Content = () =>
Main content of your application
;
return (
);
};
return (
{}}
>
);
};
```
### Without `Toolbar`
#### Single `Drawer` instance
There are two ways to render a `Drawer` without a `Toolbar`:
1. Pass the `Drawer` component to the `drawer` prop of ``. You don't need to pass `open`, `displayMode`, or `onClose` props to the `Drawer` component, as these will be handled by the `DrawerLayout`. (Recommended)
```tsx
import React, { useState } from 'react';
import Button from '@leafygreen-ui/button';
import { DisplayMode, Drawer, DrawerLayout } from '@leafygreen-ui/drawer';
function ExampleComponent() {
const [open, setOpen] = useState(false);
return (
Drawer content}
onClose={() => setOpen(false)}
>
);
}
```
2. Pass the `Drawer` component as a child of ``
```tsx
import React, { useState } from 'react';
import Button from '@leafygreen-ui/button';
import { DisplayMode, Drawer, DrawerLayout } from '@leafygreen-ui/drawer';
function App() {
const [open, setOpen] = useState(false);
return (
setOpen(false)}
open={open}
title="Drawer Title"
>
Drawer content goes here
);
}
```
#### Multiple overlay `Drawer` instances
When rendering multiple overlay `Drawer` instances, it is recommended to wrap the `Drawer`'s in a ``. The `DrawerStackProvider` will manage the stacking of multiple `Drawer` instances by providing the correct z-index.
```tsx
import React, { useState } from 'react';
import Button from '@leafygreen-ui/button';
import { DisplayMode, Drawer, DrawerLayout, DrawerStackProvider } from '@leafygreen-ui/drawer';
const MultipleDrawersComponent = () => {
const [openA, setOpenA] = useState(false);
const [openB, setOpenB] = useState(false);
const [openC, setOpenC] = useState(false);
return (
```
### Resizable Drawers
`DrawerLayout` supports rendering resizable embedded `Drawer` instances with or without a toolbar. To make an embedded `Drawer` resizable, pass the `resizable` prop to the `DrawerLayout` component. This allows users to adjust the width of the drawer by dragging.
```tsx
import React, { useState } from 'react';
import { DrawerLayout, Drawer, DisplayMode } from '@leafygreen-ui/drawer';
import Button from '@leafygreen-ui/button';
function ResizableDrawerExample() {
const [open, setOpen] = useState(false);
return (
Drawer content that can be resized by dragging the left edge
}
onClose={() => setOpen(false)}
>
);
}
```
You can also use the resizable feature with a toolbar-based drawer:
```tsx
{}}
resizable
>
{content}
```
## Props
### DrawerLayout
| Prop | Type | Description | Default |
| --------------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `children` | `React.ReactNode` | The content that should live to the left of the `Drawer`. If there is a `Toolbar`, the content will shift to accommodate the `Toolbar`. In addition, if the `DisplayMode` is `embedded`, the content will also be shifted to accommodate the opening of the `Drawer`. | |
| `displayMode` _(optional)_ | `'embedded'` \| `'overlay'` | Options to control how the drawer element is displayed \* `'embedded'` will display a drawer as a `
` element that takes up the full parent container height and on the same elevation as container page content. \* `'overlay'` will display a drawer as a `