import { Meta, ArgTypes } from '@storybook/blocks';
import { Drawer } from './Drawer';

<Meta title="MDX|Drawer" component={Drawer} />

# Drawer

### When to use

Drawer is a slide in overlay that can be used to display additional information without hiding the main page content. It can be anchored to the left or right edge of the screen.

One example of the Drawer in use is in Grafana's [panel inspector](https://grafana.com/docs/grafana/latest/panels/inspect-panel/).

### Usage

```tsx
import { Drawer } from '@grafana/ui';

onClose = () => {
  // handle the show or hide Drawer logic
};

return (
  <Drawer title="This a Drawer" size="md" onClose={this.onClose}>
    <div>Put your Drawer content here</div>
  </Drawer>
);
```

## Sizes

The Drawer supports 3 sizes: `sm`, `md`, and `lg`. This option defines a width in percentage and as well as a min-width.

- sm: width = 25vh and min-width = 384px
- md: width = 50vh and min-width = 568px
- lg: width = 75vh and min-width = 744px

## Props

<ArgTypes of={Drawer} />
