{"id":16820411,"url":"https://github.com/techniq/mui-app-container","last_synced_at":"2025-03-22T03:31:37.992Z","repository":{"id":28187978,"uuid":"116628898","full_name":"techniq/mui-app-container","owner":"techniq","description":"Orchestrates Material-UI's AppBar and Drawer components based on device width","archived":false,"fork":false,"pushed_at":"2022-12-08T17:50:19.000Z","size":4949,"stargazers_count":4,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T07:43:20.080Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://techniq.github.io/mui-app-container/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techniq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-08T04:18:37.000Z","updated_at":"2019-05-25T04:59:37.000Z","dependencies_parsed_at":"2022-08-07T13:15:29.912Z","dependency_job_id":null,"html_url":"https://github.com/techniq/mui-app-container","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-app-container","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-app-container/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-app-container/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Fmui-app-container/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techniq","download_url":"https://codeload.github.com/techniq/mui-app-container/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244902929,"owners_count":20529114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T10:56:40.052Z","updated_at":"2025-03-22T03:31:37.532Z","avatar_url":"https://github.com/techniq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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. `\u003cmain\u003e`) to provide a responsive application layout.\n\n- Sets `\u003cDrawer\u003e` props based on screen size\n  - `960px` (md) and up: sets `variant`  to `persistent` and defaults `open` to `true`\n  - Less than `960px` (ex. phone): sets `variant`  to `temporary` and defaults `open` to `false`\n- Shifts and resizes `\u003cAppBar\u003e` and content based when `\u003cDrawer\u003e` is `persistent` and `open`\n- Provides `toggleDrawer` to close drawer\n  - Supports toggling drawer only when variant is temporary (`onClick` on list item on drawer) or on all calls (AppBar menu icon)\n- Access state via context using `\u003cAppContainer.Consumer\u003e`\n\n## Usage\n```js\nimport AppContainer from 'mui-app-container';\n\nexport default () =\u003e (\n  \u003cAppContainer\u003e\n    {({ getAppBarProps, getDrawerProps, toggleDrawer }) =\u003e (\n      \u003cdiv\u003e\n        \u003cAppBar {...getAppBarProps()}\u003e\n          \u003cToolbar\u003e\n            \u003cIconButton\n              color=\"inherit\"\n              aria-label=\"open drawer\"\n              onClick={() =\u003e toggleDrawer()}\n            \u003e\n              \u003cMenuIcon /\u003e\n            \u003c/IconButton\u003e\n\n            \u003cTypography variant=\"title\" color=\"inherit\" style={{ flex: 1 }} noWrap\u003e\n              App Container Example\n            \u003c/Typography\u003e\n\n            \u003cIconButton color=\"inherit\"\u003e\n              \u003cAccountCircle /\u003e\n            \u003c/IconButton\u003e\n          \u003c/Toolbar\u003e\n        \u003c/AppBar\u003e\n\n        \u003cDrawer {...getDrawerProps()}\u003e\n          \u003cdiv\u003e\n            \u003cDivider /\u003e\n            \u003cList\u003e\n              {mailFolderListItems(() =\u003e toggleDrawer(true))}\n            \u003c/List\u003e\n            \u003cDivider /\u003e\n            \u003cList\u003e\n              {otherMailFolderListItems(() =\u003e toggleDrawer(true))}\n            \u003c/List\u003e\n          \u003c/div\u003e\n        \u003c/Drawer\u003e\n\n        \u003cmain\u003e\n          \u003cTypography\u003e{'Content goes here'}\u003c/Typography\u003e\n        \u003c/main\u003e\n      \u003c/div\u003e\n    )}\n  \u003c/AppContainer\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Fmui-app-container","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechniq%2Fmui-app-container","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Fmui-app-container/lists"}