https://github.com/techniq/mui-app-container
Orchestrates Material-UI's AppBar and Drawer components based on device width
https://github.com/techniq/mui-app-container
Last synced: about 1 year ago
JSON representation
Orchestrates Material-UI's AppBar and Drawer components based on device width
- Host: GitHub
- URL: https://github.com/techniq/mui-app-container
- Owner: techniq
- Created: 2018-01-08T04:18:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:50:19.000Z (over 3 years ago)
- Last Synced: 2025-03-18T07:43:20.080Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://techniq.github.io/mui-app-container/
- Size: 4.72 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Orchestrates Material-UI 1.0's [AppBar](https://material-ui.com/demos/app-bar/), [Drawer](https://material-ui.com/demos/drawers/) and content (ex. ``) to provide a responsive application layout.
- Sets `` props based on screen size
- `960px` (md) and up: sets `variant` to `persistent` and defaults `open` to `true`
- Less than `960px` (ex. phone): sets `variant` to `temporary` and defaults `open` to `false`
- Shifts and resizes `` and content based when `` is `persistent` and `open`
- Provides `toggleDrawer` to close drawer
- Supports toggling drawer only when variant is temporary (`onClick` on list item on drawer) or on all calls (AppBar menu icon)
- Access state via context using ``
## Usage
```js
import AppContainer from 'mui-app-container';
export default () => (
{({ getAppBarProps, getDrawerProps, toggleDrawer }) => (
toggleDrawer()}
>
App Container Example
{mailFolderListItems(() => toggleDrawer(true))}
{otherMailFolderListItems(() => toggleDrawer(true))}
{'Content goes here'}
)}
);
```