> For the complete documentation index, see [llms.txt](https://blueeast.gitbook.io/bluerain-plugin-material-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueeast.gitbook.io/bluerain-plugin-material-ui/src/components/drawer.md).

# README

Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

## Compatibility

| 🌏 Web | 🖥 Electron | 📱 React Native |
| :----: | :---------: | :-------------: |
|   ✔️   |      ✖      |        ✖        |

## Screenshots

|                                                                                                         🌏 Web                                                                                                        | 🖥 Electron | 📱 React Native |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------: | :-------------: |
| ![web image](https://4287797203-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG3sM8qCJvcIklqA0TK%2F-LSK1RGxOpUPYDFUm4gT%2F-LSK1VjgCkIt0tz-p0OV%2FDrawer.png?generation=1543319986847642\&alt=media) |     TBD     |       TBD       |

## Props

| Name           | Type                    | Default                                  | Description                                 |
| -------------- | ----------------------- | ---------------------------------------- | ------------------------------------------- |
| children       | ReactNode               |                                          | Children of Drawer component.               |
| style          | object                  |                                          | style object Drawer component.              |
| width          | number                  |                                          | width of Drawer component.                  |
| onStateChanged | (event: object) => void |                                          | called on state change of Drawer component. |
| open           | boolean                 |                                          | open prop for Drawer component.             |
| type           | string                  | 'temporary' , 'persistent' , 'permanent' | type for Drawer component.                  |

## Specific Library Props

| Name          | Type   | Default                                  | Description                            |
| ------------- | ------ | ---------------------------------------- | -------------------------------------- |
| Variant       | string | 'permanent' , 'persistent' , 'temporary' | Varient for Drawer Component           |
| side          | string |                                          | side prop for Drawer component         |
| tweenDuration | number |                                          | Tween Duraion for Drawer of component. |

## How to use

\`\`\`JavaScript import React from 'react'; import BR from '@blueeast/bluerain-os';

const DrawerSample = (props) => {

```
const Drawer = BR.Components.get('Drawer');
return (
  <Drawer
    variant="persistent"
    open={true}
    tweenDuration={1000}
    side="left"
    style={AppBarStoriesStyle}
  />
);
}
```

export default DrawerSample;