Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/22.e51868c0.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[22],{1046:function(e,n,t){"use strict";function i(e,n,t,i,a){return null}t.d(n,"a",(function(){return i}))},1047:function(e,n,t){"use strict";t.r(n);var i=t(15);t.d(n,"capitalize",(function(){return i.a}));var a=t(78);t.d(n,"createChainedFunction",(function(){return a.a}));var r=t(85);t.d(n,"createSvgIcon",(function(){return r.a}));var s=t(97);t.d(n,"debounce",(function(){return s.a}));var o=t(130);t.d(n,"deprecatedPropType",(function(){return o.a}));var c=t(159);t.d(n,"isMuiElement",(function(){return c.a}));var l=t(47);t.d(n,"ownerDocument",(function(){return l.a}));var u=t(160);t.d(n,"ownerWindow",(function(){return u.a}));var m=t(1134);t.d(n,"requirePropFactory",(function(){return m.a}));var d=t(87);t.d(n,"setRef",(function(){return d.a}));var p=t(1046);t.d(n,"unsupportedProp",(function(){return p.a}));var h=t(104);t.d(n,"useControlled",(function(){return h.a}));var b=t(38);t.d(n,"useEventCallback",(function(){return b.a}));var f=t(25);t.d(n,"useForkRef",(function(){return f.a}));var g=t(224);t.d(n,"unstable_useId",(function(){return g.a}));var v=t(158);t.d(n,"useIsFocusVisible",(function(){return v.a}))},1127:function(e,n,t){var i=t(373).default;function a(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(a=function(e){return e?t:n})(e)}e.exports=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=i(e)&&"function"!=typeof e)return{default:e};var t=a(n);if(t&&t.has(e))return t.get(e);var r={__proto__:null},s=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var c=s?Object.getOwnPropertyDescriptor(e,o):null;c&&(c.get||c.set)?Object.defineProperty(r,o,c):r[o]=e[o]}return r.default=e,t&&t.set(e,r),r},e.exports.__esModule=!0,e.exports.default=e.exports},1128:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return i.createSvgIcon}});var i=t(1047)},1129:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FrameContextConsumer=n.FrameContextProvider=n.FrameContext=void 0;var i,a=t(0),r=(i=a)&&i.__esModule?i:{default:i};var s=void 0,o=void 0;"undefined"!==typeof document&&(s=document),"undefined"!==typeof window&&(o=window);var c=n.FrameContext=r.default.createContext({document:s,window:o}),l=c.Provider,u=c.Consumer;n.FrameContextProvider=l,n.FrameContextConsumer=u},1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return q}));var i=t(118),a=t(1100),r=t(1109),s=t(1090),o=t(1117),c=t(1119),l=t(5),u=t(0),m=t(1024),d=t(551),p=t(1087),h=t(1099),b=t(11),f=t(370),g=t(371),v=t(1131),j=t.n(v),x=t(1);const O=Object(m.a)({productionPrefix:"iframe-"});class w extends u.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(f.a)({...Object(d.a)(),plugins:[...Object(d.a)().plugins,Object(g.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(x.jsxs)(x.Fragment,{children:[Object(x.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(x.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:t}=this.props;return Object(x.jsx)(j.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(x.jsx)(p.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(x.jsx)(h.a,{theme:t,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var y=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(w);function I(e){const[n,t]=Object(u.useState)(e.currentTabIndex),{component:m,raw:d,iframe:p,className:h}=e;return Object(x.jsxs)(r.a,{className:Object(l.a)(h,"shadow"),children:[Object(x.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(x.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[m&&Object(x.jsx)(o.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(s.a,{children:"remove_red_eye"})}),d&&Object(x.jsx)(o.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(s.a,{children:"code"})})]})}),Object(x.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(x.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:m&&(p?Object(x.jsx)(y,{children:Object(x.jsx)(m,{})}):Object(x.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(x.jsx)(m,{})}))}),Object(x.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:d&&Object(x.jsx)("div",{className:"flex flex-1",children:Object(x.jsx)(i.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}I.defaultProps={currentTabIndex:0};var q=I},1131:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FrameContextConsumer=n.FrameContext=void 0;var i=t(1129);Object.defineProperty(n,"FrameContext",{enumerable:!0,get:function(){return i.FrameContext}}),Object.defineProperty(n,"FrameContextConsumer",{enumerable:!0,get:function(){return i.FrameContextConsumer}});var a,r=t(1132),s=(a=r)&&a.__esModule?a:{default:a};n.default=s.default},1132:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},a=function(){function e(e,n){for(var t=0;t<n.length;t++){var i=n[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(n,t,i){return t&&e(n.prototype,t),i&&e(n,i),n}}(),r=t(0),s=m(r),o=m(t(22)),c=m(t(553)),l=t(1129),u=m(t(1133));function m(e){return e&&e.__esModule?e:{default:e}}var d=function(e){function n(e,t){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n);var i=function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));return i.handleLoad=function(){i.forceUpdate()},i._isMounted=!1,i}return function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),a(n,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var n=this.props.contentDidMount,t=this.props.contentDidUpdate,i=e.defaultView||e.parentView,a=s.default.createElement(u.default,{contentDidMount:n,contentDidUpdate:t},s.default.createElement(l.FrameContextProvider,{value:{document:e,window:i}},s.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var r=this.getMountTarget();return[o.default.createPortal(this.props.head,this.getDoc().head),o.default.createPortal(a,r)]}},{key:"render",value:function(){var e=this,n=i({},this.props,{children:void 0});return delete n.head,delete n.initialContent,delete n.mountTarget,delete n.contentDidMount,delete n.contentDidUpdate,s.default.createElement("iframe",i({},n,{ref:function(n){e.node=n}}),this.renderFrameContents())}}]),n}(r.Component);d.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},d.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},n.default=d},1133:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=function(){function e(e,n){for(var t=0;t<n.length;t++){var i=n[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(n,t,i){return t&&e(n.prototype,t),i&&e(n,i),n}}(),a=t(0),r=(s(a),s(t(553)));function s(e){return e&&e.__esModule?e:{default:e}}var o=function(e){function n(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),function(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!==typeof n&&"function"!==typeof n?e:n}(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),i(n,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return a.Children.only(this.props.children)}}]),n}(a.Component);o.propTypes={children:r.default.element.isRequired,contentDidMount:r.default.func.isRequired,contentDidUpdate:r.default.func.isRequired},n.default=o},1134:function(e,n,t){"use strict";function i(e){return function(){return null}}t.d(n,"a",(function(){return i}))},1159:function(e,n,t){"use strict";var i=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),s=(0,i(t(1128)).default)(r.createElement("path",{d:"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"}),"Mail");n.default=s},1164:function(e,n,t){"use strict";var i=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),s=(0,i(t(1128)).default)(r.createElement("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"}),"Menu");n.default=s},1176:function(e,n,t){"use strict";var i=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),s=(0,i(t(1128)).default)(r.createElement("path",{d:"M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"}),"MoveToInbox");n.default=s},130:function(e,n,t){"use strict";function i(e,n){return function(){return null}}t.d(n,"a",(function(){return i}))},1342:function(e,n,t){"use strict";var i=t(2),a=t(0),r=t(11),s={WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",boxSizing:"border-box"},o=function(e){return Object(i.a)({color:e.palette.text.primary},e.typography.body2,{backgroundColor:e.palette.background.default,"@media print":{backgroundColor:e.palette.common.white}})};n.a=Object(r.a)((function(e){return{"@global":{html:s,"*, *::before, *::after":{boxSizing:"inherit"},"strong, b":{fontWeight:e.typography.fontWeightBold},body:Object(i.a)({margin:0},o(e),{"&::backdrop":{backgroundColor:e.palette.background.default}})}}}),{name:"MuiCssBaseline"})((function(e){var n=e.children,t=void 0===n?null:n;return e.classes,a.createElement(a.Fragment,null,t)}))},1354:function(e,n,t){"use strict";var i=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),s=(0,i(t(1128)).default)(r.createElement("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}),"ChevronLeft");n.default=s},1355:function(e,n,t){"use strict";var i=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),s=(0,i(t(1128)).default)(r.createElement("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}),"ChevronRight");n.default=s},1958:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return x}));var i=t(0),a=t.n(i),r=t(5),s=t(1072),o=t(94),c=t(1098),l=t(1033),u=t(1108),m=t(1034),d=t(1112),p=t(1103),h=t(1176),b=t.n(h),f=t(1159),g=t.n(f),v=t(1);const j=Object(s.a)({list:{width:250},fullList:{width:"auto"}});function x(){const e=j(),[n,t]=a.a.useState({top:!1,left:!1,bottom:!1,right:!1}),i=(e,i)=>a=>{("keydown"!==a.type||"Tab"!==a.key&&"Shift"!==a.key)&&t({...n,[e]:i})},s=n=>Object(v.jsxs)("div",{className:Object(r.a)(e.list,{[e.fullList]:"top"===n||"bottom"===n}),role:"presentation",onClick:i(n,!1),onKeyDown:i(n,!1),children:[Object(v.jsx)(l.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))}),Object(v.jsx)(u.a,{}),Object(v.jsx)(l.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))})]});return Object(v.jsx)("div",{children:["left","right","top","bottom"].map((e=>Object(v.jsxs)(a.a.Fragment,{children:[Object(v.jsx)(c.a,{onClick:i(e,!0),children:e}),Object(v.jsx)(o.a,{anchor:e,open:n[e],onClose:i(e,!1),children:s(e)})]},e)))})}},1959:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport Button from '@material-ui/core/Button';\nimport List from '@material-ui/core/List';\nimport Divider from '@material-ui/core/Divider';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst useStyles = makeStyles({\n list: {\n width: 250,\n },\n fullList: {\n width: 'auto',\n },\n});\n\nexport default function TemporaryDrawer() {\n const classes = useStyles();\n const [state, setState] = React.useState({\n top: false,\n left: false,\n bottom: false,\n right: false,\n });\n\n const toggleDrawer = (anchor, open) => (event) => {\n if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {\n return;\n }\n\n setState({ ...state, [anchor]: open });\n };\n\n const list = (anchor) => (\n <div\n className={clsx(classes.list, {\n [classes.fullList]: anchor === 'top' || anchor === 'bottom',\n })}\n role=\"presentation\"\n onClick={toggleDrawer(anchor, false)}\n onKeyDown={toggleDrawer(anchor, false)}\n >\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </div>\n );\n\n return (\n <div>\n {['left', 'right', 'top', 'bottom'].map((anchor) => (\n <React.Fragment key={anchor}>\n <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>\n <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>\n {list(anchor)}\n </Drawer>\n </React.Fragment>\n ))}\n </div>\n );\n}\n"},1960:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return x}));var i=t(0),a=t.n(i),r=t(5),s=t(1072),o=t(1125),c=t(1098),l=t(1033),u=t(1108),m=t(1034),d=t(1112),p=t(1103),h=t(1176),b=t.n(h),f=t(1159),g=t.n(f),v=t(1);const j=Object(s.a)({list:{width:250},fullList:{width:"auto"}});function x(){const e=j(),[n,t]=a.a.useState({top:!1,left:!1,bottom:!1,right:!1}),i=(e,i)=>a=>{(!a||"keydown"!==a.type||"Tab"!==a.key&&"Shift"!==a.key)&&t({...n,[e]:i})},s=n=>Object(v.jsxs)("div",{className:Object(r.a)(e.list,{[e.fullList]:"top"===n||"bottom"===n}),role:"presentation",onClick:i(n,!1),onKeyDown:i(n,!1),children:[Object(v.jsx)(l.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))}),Object(v.jsx)(u.a,{}),Object(v.jsx)(l.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))})]});return Object(v.jsx)("div",{children:["left","right","top","bottom"].map((e=>Object(v.jsxs)(a.a.Fragment,{children:[Object(v.jsx)(c.a,{onClick:i(e,!0),children:e}),Object(v.jsx)(o.a,{anchor:e,open:n[e],onClose:i(e,!1),onOpen:i(e,!0),children:s(e)})]},e)))})}},1961:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles } from '@material-ui/core/styles';\nimport SwipeableDrawer from '@material-ui/core/SwipeableDrawer';\nimport Button from '@material-ui/core/Button';\nimport List from '@material-ui/core/List';\nimport Divider from '@material-ui/core/Divider';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst useStyles = makeStyles({\n list: {\n width: 250,\n },\n fullList: {\n width: 'auto',\n },\n});\n\nexport default function SwipeableTemporaryDrawer() {\n const classes = useStyles();\n const [state, setState] = React.useState({\n top: false,\n left: false,\n bottom: false,\n right: false,\n });\n\n const toggleDrawer = (anchor, open) => (event) => {\n if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {\n return;\n }\n\n setState({ ...state, [anchor]: open });\n };\n\n const list = (anchor) => (\n <div\n className={clsx(classes.list, {\n [classes.fullList]: anchor === 'top' || anchor === 'bottom',\n })}\n role=\"presentation\"\n onClick={toggleDrawer(anchor, false)}\n onKeyDown={toggleDrawer(anchor, false)}\n >\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </div>\n );\n\n return (\n <div>\n {['left', 'right', 'top', 'bottom'].map((anchor) => (\n <React.Fragment key={anchor}>\n <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>\n <SwipeableDrawer\n anchor={anchor}\n open={state[anchor]}\n onClose={toggleDrawer(anchor, false)}\n onOpen={toggleDrawer(anchor, true)}\n >\n {list(anchor)}\n </SwipeableDrawer>\n </React.Fragment>\n ))}\n </div>\n );\n}\n"},1962:function(e,n,t){"use strict";t.r(n);var i=t(0),a=t.n(i),r=t(1100),s=t(1342),o=t(1108),c=t(94),l=t(1121),u=t(1028),m=t(1176),d=t.n(m),p=t(1033),h=t(1034),b=t(1112),f=t(1103),g=t(1159),v=t.n(g),j=t(1164),x=t.n(j),O=t(1101),w=t(194),y=t(1072),I=t(43),q=t(1);const L=240,C=Object(y.a)((e=>({root:{display:"flex"},drawer:{[e.breakpoints.up("sm")]:{width:L,flexShrink:0}},appBar:{[e.breakpoints.up("sm")]:{width:"calc(100% - ".concat(L,"px)"),marginLeft:L}},menuButton:{marginRight:e.spacing(2),[e.breakpoints.up("sm")]:{display:"none"}},toolbar:e.mixins.toolbar,drawerPaper:{width:L},content:{flexGrow:1,padding:e.spacing(3)}})));n.default=function(e){const{window:n}=e,t=C(),i=Object(I.a)(),[m,g]=a.a.useState(!1),j=()=>{g(!m)},y=Object(q.jsxs)("div",{children:[Object(q.jsx)("div",{className:t.toolbar}),Object(q.jsx)(o.a,{}),Object(q.jsx)(p.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(q.jsxs)(h.a,{button:!0,children:[Object(q.jsx)(b.a,{children:n%2===0?Object(q.jsx)(d.a,{}):Object(q.jsx)(v.a,{})}),Object(q.jsx)(f.a,{primary:e})]},e)))}),Object(q.jsx)(o.a,{}),Object(q.jsx)(p.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(q.jsxs)(h.a,{button:!0,children:[Object(q.jsx)(b.a,{children:n%2===0?Object(q.jsx)(d.a,{}):Object(q.jsx)(v.a,{})}),Object(q.jsx)(f.a,{primary:e})]},e)))})]}),L=void 0!==n?()=>n().document.body:void 0;return Object(q.jsxs)("div",{className:t.root,children:[Object(q.jsx)(s.a,{}),Object(q.jsx)(r.a,{position:"fixed",className:t.appBar,children:Object(q.jsxs)(O.a,{children:[Object(q.jsx)(u.a,{color:"inherit","aria-label":"open drawer",edge:"start",onClick:j,className:t.menuButton,children:Object(q.jsx)(x.a,{})}),Object(q.jsx)(w.a,{variant:"h6",noWrap:!0,children:"Responsive drawer"})]})}),Object(q.jsxs)("nav",{className:t.drawer,"aria-label":"mailbox folders",children:[Object(q.jsx)(l.a,{smUp:!0,implementation:"css",children:Object(q.jsx)(c.a,{container:L,variant:"temporary",anchor:"rtl"===i.direction?"right":"left",open:m,onClose:j,classes:{paper:t.drawerPaper},ModalProps:{keepMounted:!0},children:y})}),Object(q.jsx)(l.a,{xsDown:!0,implementation:"css",children:Object(q.jsx)(c.a,{classes:{paper:t.drawerPaper},variant:"permanent",open:!0,children:y})})]}),Object(q.jsxs)("main",{className:t.content,children:[Object(q.jsx)("div",{className:t.toolbar}),Object(q.jsx)(w.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(q.jsx)(w.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]})]})}},1963:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport AppBar from '@material-ui/core/AppBar';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Divider from '@material-ui/core/Divider';\nimport Drawer from '@material-ui/core/Drawer';\nimport Hidden from '@material-ui/core/Hidden';\nimport IconButton from '@material-ui/core/IconButton';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MailIcon from '@material-ui/icons/Mail';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n drawer: {\n [theme.breakpoints.up('sm')]: {\n width: drawerWidth,\n flexShrink: 0,\n },\n },\n appBar: {\n [theme.breakpoints.up('sm')]: {\n width: `calc(100% - ${drawerWidth}px)`,\n marginLeft: drawerWidth,\n },\n },\n menuButton: {\n marginRight: theme.spacing(2),\n [theme.breakpoints.up('sm')]: {\n display: 'none',\n },\n },\n // necessary for content to be below app bar\n toolbar: theme.mixins.toolbar,\n drawerPaper: {\n width: drawerWidth,\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n },\n}));\n\nfunction ResponsiveDrawer(props) {\n const { window } = props;\n const classes = useStyles();\n const theme = useTheme();\n const [mobileOpen, setMobileOpen] = React.useState(false);\n\n const handleDrawerToggle = () => {\n setMobileOpen(!mobileOpen);\n };\n\n const drawer = (\n <div>\n <div className={classes.toolbar} />\n <Divider />\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </div>\n );\n\n const container = window !== undefined ? () => window().document.body : undefined;\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar position=\"fixed\" className={classes.appBar}>\n <Toolbar>\n <IconButton\n color=\"inherit\"\n aria-label=\"open drawer\"\n edge=\"start\"\n onClick={handleDrawerToggle}\n className={classes.menuButton}\n >\n <MenuIcon />\n </IconButton>\n <Typography variant=\"h6\" noWrap>\n Responsive drawer\n </Typography>\n </Toolbar>\n </AppBar>\n <nav className={classes.drawer} aria-label=\"mailbox folders\">\n {/* The implementation can be swapped with js to avoid SEO duplication of links. */}\n <Hidden smUp implementation=\"css\">\n <Drawer\n container={container}\n variant=\"temporary\"\n anchor={theme.direction === 'rtl' ? 'right' : 'left'}\n open={mobileOpen}\n onClose={handleDrawerToggle}\n classes={{\n paper: classes.drawerPaper,\n }}\n ModalProps={{\n keepMounted: true, // Better open performance on mobile.\n }}\n >\n {drawer}\n </Drawer>\n </Hidden>\n <Hidden xsDown implementation=\"css\">\n <Drawer\n classes={{\n paper: classes.drawerPaper,\n }}\n variant=\"permanent\"\n open\n >\n {drawer}\n </Drawer>\n </Hidden>\n </nav>\n <main className={classes.content}>\n <div className={classes.toolbar} />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n </div>\n );\n}\n\nResponsiveDrawer.propTypes = {\n /**\n * Injected by the documentation to work in an iframe.\n * You won't need it on your project.\n */\n window: PropTypes.func,\n};\n\nexport default ResponsiveDrawer;\n"},1964:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return M}));var i=t(0),a=t.n(i),r=t(5),s=t(1072),o=t(43),c=t(94),l=t(1342),u=t(1100),m=t(1101),d=t(1033),p=t(194),h=t(1108),b=t(1028),f=t(1164),g=t.n(f),v=t(1354),j=t.n(v),x=t(1355),O=t.n(x),w=t(1034),y=t(1112),I=t(1103),q=t(1176),L=t.n(q),C=t(1159),S=t.n(C),T=t(1);const D=240,N=Object(s.a)((e=>({root:{display:"flex"},appBar:{transition:e.transitions.create(["margin","width"],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})},appBarShift:{width:"calc(100% - ".concat(D,"px)"),marginLeft:D,transition:e.transitions.create(["margin","width"],{easing:e.transitions.easing.easeOut,duration:e.transitions.duration.enteringScreen})},menuButton:{marginRight:e.spacing(2)},hide:{display:"none"},drawer:{width:D,flexShrink:0},drawerPaper:{width:D},drawerHeader:{display:"flex",alignItems:"center",padding:e.spacing(0,1),...e.mixins.toolbar,justifyContent:"flex-end"},content:{flexGrow:1,padding:e.spacing(3),transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),marginLeft:-240},contentShift:{transition:e.transitions.create("margin",{easing:e.transitions.easing.easeOut,duration:e.transitions.duration.enteringScreen}),marginLeft:0}})));function M(){const e=N(),n=Object(o.a)(),[t,i]=a.a.useState(!1);return Object(T.jsxs)("div",{className:e.root,children:[Object(T.jsx)(l.a,{}),Object(T.jsx)(u.a,{position:"fixed",className:Object(r.a)(e.appBar,{[e.appBarShift]:t}),children:Object(T.jsxs)(m.a,{children:[Object(T.jsx)(b.a,{color:"inherit","aria-label":"open drawer",onClick:()=>{i(!0)},edge:"start",className:Object(r.a)(e.menuButton,t&&e.hide),children:Object(T.jsx)(g.a,{})}),Object(T.jsx)(p.a,{variant:"h6",noWrap:!0,children:"Persistent drawer"})]})}),Object(T.jsxs)(c.a,{className:e.drawer,variant:"persistent",anchor:"left",open:t,classes:{paper:e.drawerPaper},children:[Object(T.jsx)("div",{className:e.drawerHeader,children:Object(T.jsx)(b.a,{onClick:()=>{i(!1)},children:"ltr"===n.direction?Object(T.jsx)(j.a,{}):Object(T.jsx)(O.a,{})})}),Object(T.jsx)(h.a,{}),Object(T.jsx)(d.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(T.jsxs)(w.a,{button:!0,children:[Object(T.jsx)(y.a,{children:n%2===0?Object(T.jsx)(L.a,{}):Object(T.jsx)(S.a,{})}),Object(T.jsx)(I.a,{primary:e})]},e)))}),Object(T.jsx)(h.a,{}),Object(T.jsx)(d.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(T.jsxs)(w.a,{button:!0,children:[Object(T.jsx)(y.a,{children:n%2===0?Object(T.jsx)(L.a,{}):Object(T.jsx)(S.a,{})}),Object(T.jsx)(I.a,{primary:e})]},e)))})]}),Object(T.jsxs)("main",{className:Object(r.a)(e.content,{[e.contentShift]:t}),children:[Object(T.jsx)("div",{className:e.drawerHeader}),Object(T.jsx)(p.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(T.jsx)(p.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]})]})}},1965:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n transition: theme.transitions.create(['margin', 'width'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n appBarShift: {\n width: `calc(100% - ${drawerWidth}px)`,\n marginLeft: drawerWidth,\n transition: theme.transitions.create(['margin', 'width'], {\n easing: theme.transitions.easing.easeOut,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n menuButton: {\n marginRight: theme.spacing(2),\n },\n hide: {\n display: 'none',\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n },\n drawerPaper: {\n width: drawerWidth,\n },\n drawerHeader: {\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(0, 1),\n // necessary for content to be below app bar\n ...theme.mixins.toolbar,\n justifyContent: 'flex-end',\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n transition: theme.transitions.create('margin', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n marginLeft: -drawerWidth,\n },\n contentShift: {\n transition: theme.transitions.create('margin', {\n easing: theme.transitions.easing.easeOut,\n duration: theme.transitions.duration.enteringScreen,\n }),\n marginLeft: 0,\n },\n}));\n\nexport default function PersistentDrawerLeft() {\n const classes = useStyles();\n const theme = useTheme();\n const [open, setOpen] = React.useState(false);\n\n const handleDrawerOpen = () => {\n setOpen(true);\n };\n\n const handleDrawerClose = () => {\n setOpen(false);\n };\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar\n position=\"fixed\"\n className={clsx(classes.appBar, {\n [classes.appBarShift]: open,\n })}\n >\n <Toolbar>\n <IconButton\n color=\"inherit\"\n aria-label=\"open drawer\"\n onClick={handleDrawerOpen}\n edge=\"start\"\n className={clsx(classes.menuButton, open && classes.hide)}\n >\n <MenuIcon />\n </IconButton>\n <Typography variant=\"h6\" noWrap>\n Persistent drawer\n </Typography>\n </Toolbar>\n </AppBar>\n <Drawer\n className={classes.drawer}\n variant=\"persistent\"\n anchor=\"left\"\n open={open}\n classes={{\n paper: classes.drawerPaper,\n }}\n >\n <div className={classes.drawerHeader}>\n <IconButton onClick={handleDrawerClose}>\n {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n </IconButton>\n </div>\n <Divider />\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </Drawer>\n <main\n className={clsx(classes.content, {\n [classes.contentShift]: open,\n })}\n >\n <div className={classes.drawerHeader} />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n </div>\n );\n}\n"},1966:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return M}));var i=t(0),a=t.n(i),r=t(5),s=t(1072),o=t(43),c=t(94),l=t(1100),u=t(1101),m=t(1342),d=t(1033),p=t(194),h=t(1108),b=t(1028),f=t(1164),g=t.n(f),v=t(1354),j=t.n(v),x=t(1355),O=t.n(x),w=t(1034),y=t(1112),I=t(1103),q=t(1176),L=t.n(q),C=t(1159),S=t.n(C),T=t(1);const D=240,N=Object(s.a)((e=>({root:{display:"flex"},appBar:{transition:e.transitions.create(["margin","width"],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})},appBarShift:{width:"calc(100% - ".concat(D,"px)"),transition:e.transitions.create(["margin","width"],{easing:e.transitions.easing.easeOut,duration:e.transitions.duration.enteringScreen}),marginRight:D},title:{flexGrow:1},hide:{display:"none"},drawer:{width:D,flexShrink:0},drawerPaper:{width:D},drawerHeader:{display:"flex",alignItems:"center",padding:e.spacing(0,1),...e.mixins.toolbar,justifyContent:"flex-start"},content:{flexGrow:1,padding:e.spacing(3),transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),marginRight:-240},contentShift:{transition:e.transitions.create("margin",{easing:e.transitions.easing.easeOut,duration:e.transitions.duration.enteringScreen}),marginRight:0}})));function M(){const e=N(),n=Object(o.a)(),[t,i]=a.a.useState(!1);return Object(T.jsxs)("div",{className:e.root,children:[Object(T.jsx)(m.a,{}),Object(T.jsx)(l.a,{position:"fixed",className:Object(r.a)(e.appBar,{[e.appBarShift]:t}),children:Object(T.jsxs)(u.a,{children:[Object(T.jsx)(p.a,{variant:"h6",noWrap:!0,className:e.title,children:"Persistent drawer"}),Object(T.jsx)(b.a,{color:"inherit","aria-label":"open drawer",edge:"end",onClick:()=>{i(!0)},className:Object(r.a)(t&&e.hide),children:Object(T.jsx)(g.a,{})})]})}),Object(T.jsxs)("main",{className:Object(r.a)(e.content,{[e.contentShift]:t}),children:[Object(T.jsx)("div",{className:e.drawerHeader}),Object(T.jsx)(p.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(T.jsx)(p.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]}),Object(T.jsxs)(c.a,{className:e.drawer,variant:"persistent",anchor:"right",open:t,classes:{paper:e.drawerPaper},children:[Object(T.jsx)("div",{className:e.drawerHeader,children:Object(T.jsx)(b.a,{onClick:()=>{i(!1)},children:"rtl"===n.direction?Object(T.jsx)(j.a,{}):Object(T.jsx)(O.a,{})})}),Object(T.jsx)(h.a,{}),Object(T.jsx)(d.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(T.jsxs)(w.a,{button:!0,children:[Object(T.jsx)(y.a,{children:n%2===0?Object(T.jsx)(L.a,{}):Object(T.jsx)(S.a,{})}),Object(T.jsx)(I.a,{primary:e})]},e)))}),Object(T.jsx)(h.a,{}),Object(T.jsx)(d.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(T.jsxs)(w.a,{button:!0,children:[Object(T.jsx)(y.a,{children:n%2===0?Object(T.jsx)(L.a,{}):Object(T.jsx)(S.a,{})}),Object(T.jsx)(I.a,{primary:e})]},e)))})]})]})}},1967:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport List from '@material-ui/core/List';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n transition: theme.transitions.create(['margin', 'width'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n appBarShift: {\n width: `calc(100% - ${drawerWidth}px)`,\n transition: theme.transitions.create(['margin', 'width'], {\n easing: theme.transitions.easing.easeOut,\n duration: theme.transitions.duration.enteringScreen,\n }),\n marginRight: drawerWidth,\n },\n title: {\n flexGrow: 1,\n },\n hide: {\n display: 'none',\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n },\n drawerPaper: {\n width: drawerWidth,\n },\n drawerHeader: {\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(0, 1),\n // necessary for content to be below app bar\n ...theme.mixins.toolbar,\n justifyContent: 'flex-start',\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n transition: theme.transitions.create('margin', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n marginRight: -drawerWidth,\n },\n contentShift: {\n transition: theme.transitions.create('margin', {\n easing: theme.transitions.easing.easeOut,\n duration: theme.transitions.duration.enteringScreen,\n }),\n marginRight: 0,\n },\n}));\n\nexport default function PersistentDrawerRight() {\n const classes = useStyles();\n const theme = useTheme();\n const [open, setOpen] = React.useState(false);\n\n const handleDrawerOpen = () => {\n setOpen(true);\n };\n\n const handleDrawerClose = () => {\n setOpen(false);\n };\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar\n position=\"fixed\"\n className={clsx(classes.appBar, {\n [classes.appBarShift]: open,\n })}\n >\n <Toolbar>\n <Typography variant=\"h6\" noWrap className={classes.title}>\n Persistent drawer\n </Typography>\n <IconButton\n color=\"inherit\"\n aria-label=\"open drawer\"\n edge=\"end\"\n onClick={handleDrawerOpen}\n className={clsx(open && classes.hide)}\n >\n <MenuIcon />\n </IconButton>\n </Toolbar>\n </AppBar>\n <main\n className={clsx(classes.content, {\n [classes.contentShift]: open,\n })}\n >\n <div className={classes.drawerHeader} />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n <Drawer\n className={classes.drawer}\n variant=\"persistent\"\n anchor=\"right\"\n open={open}\n classes={{\n paper: classes.drawerPaper,\n }}\n >\n <div className={classes.drawerHeader}>\n <IconButton onClick={handleDrawerClose}>\n {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n </IconButton>\n </div>\n <Divider />\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </Drawer>\n </div>\n );\n}\n"},1968:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return M}));var i=t(0),a=t.n(i),r=t(5),s=t(1072),o=t(43),c=t(94),l=t(1100),u=t(1101),m=t(1033),d=t(1342),p=t(194),h=t(1108),b=t(1028),f=t(1164),g=t.n(f),v=t(1354),j=t.n(v),x=t(1355),O=t.n(x),w=t(1034),y=t(1112),I=t(1103),q=t(1176),L=t.n(q),C=t(1159),S=t.n(C),T=t(1);const D=240,N=Object(s.a)((e=>({root:{display:"flex"},appBar:{zIndex:e.zIndex.drawer+1,transition:e.transitions.create(["width","margin"],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})},appBarShift:{marginLeft:D,width:"calc(100% - ".concat(D,"px)"),transition:e.transitions.create(["width","margin"],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})},menuButton:{marginRight:36},hide:{display:"none"},drawer:{width:D,flexShrink:0,whiteSpace:"nowrap"},drawerOpen:{width:D,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})},drawerClose:{transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:e.spacing(7)+1,[e.breakpoints.up("sm")]:{width:e.spacing(9)+1}},toolbar:{display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar},content:{flexGrow:1,padding:e.spacing(3)}})));function M(){const e=N(),n=Object(o.a)(),[t,i]=a.a.useState(!1);return Object(T.jsxs)("div",{className:e.root,children:[Object(T.jsx)(d.a,{}),Object(T.jsx)(l.a,{position:"fixed",className:Object(r.a)(e.appBar,{[e.appBarShift]:t}),children:Object(T.jsxs)(u.a,{children:[Object(T.jsx)(b.a,{color:"inherit","aria-label":"open drawer",onClick:()=>{i(!0)},edge:"start",className:Object(r.a)(e.menuButton,{[e.hide]:t}),children:Object(T.jsx)(g.a,{})}),Object(T.jsx)(p.a,{variant:"h6",noWrap:!0,children:"Mini variant drawer"})]})}),Object(T.jsxs)(c.a,{variant:"permanent",className:Object(r.a)(e.drawer,{[e.drawerOpen]:t,[e.drawerClose]:!t}),classes:{paper:Object(r.a)({[e.drawerOpen]:t,[e.drawerClose]:!t})},children:[Object(T.jsx)("div",{className:e.toolbar,children:Object(T.jsx)(b.a,{onClick:()=>{i(!1)},children:"rtl"===n.direction?Object(T.jsx)(O.a,{}):Object(T.jsx)(j.a,{})})}),Object(T.jsx)(h.a,{}),Object(T.jsx)(m.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(T.jsxs)(w.a,{button:!0,children:[Object(T.jsx)(y.a,{children:n%2===0?Object(T.jsx)(L.a,{}):Object(T.jsx)(S.a,{})}),Object(T.jsx)(I.a,{primary:e})]},e)))}),Object(T.jsx)(h.a,{}),Object(T.jsx)(m.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(T.jsxs)(w.a,{button:!0,children:[Object(T.jsx)(y.a,{children:n%2===0?Object(T.jsx)(L.a,{}):Object(T.jsx)(S.a,{})}),Object(T.jsx)(I.a,{primary:e})]},e)))})]}),Object(T.jsxs)("main",{className:e.content,children:[Object(T.jsx)("div",{className:e.toolbar}),Object(T.jsx)(p.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(T.jsx)(p.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]})]})}},1969:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n },\n appBarShift: {\n marginLeft: drawerWidth,\n width: `calc(100% - ${drawerWidth}px)`,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n menuButton: {\n marginRight: 36,\n },\n hide: {\n display: 'none',\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n whiteSpace: 'nowrap',\n },\n drawerOpen: {\n width: drawerWidth,\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n drawerClose: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n overflowX: 'hidden',\n width: theme.spacing(7) + 1,\n [theme.breakpoints.up('sm')]: {\n width: theme.spacing(9) + 1,\n },\n },\n toolbar: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n padding: theme.spacing(0, 1),\n // necessary for content to be below app bar\n ...theme.mixins.toolbar,\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n },\n}));\n\nexport default function MiniDrawer() {\n const classes = useStyles();\n const theme = useTheme();\n const [open, setOpen] = React.useState(false);\n\n const handleDrawerOpen = () => {\n setOpen(true);\n };\n\n const handleDrawerClose = () => {\n setOpen(false);\n };\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar\n position=\"fixed\"\n className={clsx(classes.appBar, {\n [classes.appBarShift]: open,\n })}\n >\n <Toolbar>\n <IconButton\n color=\"inherit\"\n aria-label=\"open drawer\"\n onClick={handleDrawerOpen}\n edge=\"start\"\n className={clsx(classes.menuButton, {\n [classes.hide]: open,\n })}\n >\n <MenuIcon />\n </IconButton>\n <Typography variant=\"h6\" noWrap>\n Mini variant drawer\n </Typography>\n </Toolbar>\n </AppBar>\n <Drawer\n variant=\"permanent\"\n className={clsx(classes.drawer, {\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open,\n })}\n classes={{\n paper: clsx({\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open,\n }),\n }}\n >\n <div className={classes.toolbar}>\n <IconButton onClick={handleDrawerClose}>\n {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n </IconButton>\n </div>\n <Divider />\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </Drawer>\n <main className={classes.content}>\n <div className={classes.toolbar} />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n </div>\n );\n}\n"},1970:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return O}));t(0);var i=t(1072),a=t(94),r=t(1342),s=t(1100),o=t(1101),c=t(1033),l=t(194),u=t(1108),m=t(1034),d=t(1112),p=t(1103),h=t(1176),b=t.n(h),f=t(1159),g=t.n(f),v=t(1);const j=240,x=Object(i.a)((e=>({root:{display:"flex"},appBar:{width:"calc(100% - ".concat(j,"px)"),marginLeft:j},drawer:{width:j,flexShrink:0},drawerPaper:{width:j},toolbar:e.mixins.toolbar,content:{flexGrow:1,backgroundColor:e.palette.background.default,padding:e.spacing(3)}})));function O(){const e=x();return Object(v.jsxs)("div",{className:e.root,children:[Object(v.jsx)(r.a,{}),Object(v.jsx)(s.a,{position:"fixed",className:e.appBar,children:Object(v.jsx)(o.a,{children:Object(v.jsx)(l.a,{variant:"h6",noWrap:!0,children:"Permanent drawer"})})}),Object(v.jsxs)(a.a,{className:e.drawer,variant:"permanent",classes:{paper:e.drawerPaper},anchor:"left",children:[Object(v.jsx)("div",{className:e.toolbar}),Object(v.jsx)(u.a,{}),Object(v.jsx)(c.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))}),Object(v.jsx)(u.a,{}),Object(v.jsx)(c.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))})]}),Object(v.jsxs)("main",{className:e.content,children:[Object(v.jsx)("div",{className:e.toolbar}),Object(v.jsx)(l.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(v.jsx)(l.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]})]})}},1971:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n width: `calc(100% - ${drawerWidth}px)`,\n marginLeft: drawerWidth,\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n },\n drawerPaper: {\n width: drawerWidth,\n },\n // necessary for content to be below app bar\n toolbar: theme.mixins.toolbar,\n content: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.default,\n padding: theme.spacing(3),\n },\n}));\n\nexport default function PermanentDrawerLeft() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar position=\"fixed\" className={classes.appBar}>\n <Toolbar>\n <Typography variant=\"h6\" noWrap>\n Permanent drawer\n </Typography>\n </Toolbar>\n </AppBar>\n <Drawer\n className={classes.drawer}\n variant=\"permanent\"\n classes={{\n paper: classes.drawerPaper,\n }}\n anchor=\"left\"\n >\n <div className={classes.toolbar} />\n <Divider />\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </Drawer>\n <main className={classes.content}>\n <div className={classes.toolbar} />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n </div>\n );\n}\n"},1972:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return O}));t(0);var i=t(1072),a=t(94),r=t(1342),s=t(1100),o=t(1101),c=t(1033),l=t(194),u=t(1108),m=t(1034),d=t(1112),p=t(1103),h=t(1176),b=t.n(h),f=t(1159),g=t.n(f),v=t(1);const j=240,x=Object(i.a)((e=>({root:{display:"flex"},appBar:{width:"calc(100% - ".concat(j,"px)"),marginRight:j},drawer:{width:j,flexShrink:0},drawerPaper:{width:j},toolbar:e.mixins.toolbar,content:{flexGrow:1,backgroundColor:e.palette.background.default,padding:e.spacing(3)}})));function O(){const e=x();return Object(v.jsxs)("div",{className:e.root,children:[Object(v.jsx)(r.a,{}),Object(v.jsx)(s.a,{position:"fixed",className:e.appBar,children:Object(v.jsx)(o.a,{children:Object(v.jsx)(l.a,{variant:"h6",noWrap:!0,children:"Permanent drawer"})})}),Object(v.jsxs)("main",{className:e.content,children:[Object(v.jsx)("div",{className:e.toolbar}),Object(v.jsx)(l.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(v.jsx)(l.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]}),Object(v.jsxs)(a.a,{className:e.drawer,variant:"permanent",classes:{paper:e.drawerPaper},anchor:"right",children:[Object(v.jsx)("div",{className:e.toolbar}),Object(v.jsx)(u.a,{}),Object(v.jsx)(c.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))}),Object(v.jsx)(u.a,{}),Object(v.jsx)(c.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))})]})]})}},1973:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n width: `calc(100% - ${drawerWidth}px)`,\n marginRight: drawerWidth,\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n },\n drawerPaper: {\n width: drawerWidth,\n },\n // necessary for content to be below app bar\n toolbar: theme.mixins.toolbar,\n content: {\n flexGrow: 1,\n backgroundColor: theme.palette.background.default,\n padding: theme.spacing(3),\n },\n}));\n\nexport default function PermanentDrawerRight() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar position=\"fixed\" className={classes.appBar}>\n <Toolbar>\n <Typography variant=\"h6\" noWrap>\n Permanent drawer\n </Typography>\n </Toolbar>\n </AppBar>\n <main className={classes.content}>\n <div className={classes.toolbar} />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n <Drawer\n className={classes.drawer}\n variant=\"permanent\"\n classes={{\n paper: classes.drawerPaper,\n }}\n anchor=\"right\"\n >\n <div className={classes.toolbar} />\n <Divider />\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </Drawer>\n </div>\n );\n}\n"},1974:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return x}));t(0);var i=t(1072),a=t(94),r=t(1100),s=t(1342),o=t(1101),c=t(1033),l=t(194),u=t(1108),m=t(1034),d=t(1112),p=t(1103),h=t(1176),b=t.n(h),f=t(1159),g=t.n(f),v=t(1);const j=Object(i.a)((e=>({root:{display:"flex"},appBar:{zIndex:e.zIndex.drawer+1},drawer:{width:240,flexShrink:0},drawerPaper:{width:240},drawerContainer:{overflow:"auto"},content:{flexGrow:1,padding:e.spacing(3)}})));function x(){const e=j();return Object(v.jsxs)("div",{className:e.root,children:[Object(v.jsx)(s.a,{}),Object(v.jsx)(r.a,{position:"fixed",className:e.appBar,children:Object(v.jsx)(o.a,{children:Object(v.jsx)(l.a,{variant:"h6",noWrap:!0,children:"Clipped drawer"})})}),Object(v.jsxs)(a.a,{className:e.drawer,variant:"permanent",classes:{paper:e.drawerPaper},children:[Object(v.jsx)(o.a,{}),Object(v.jsxs)("div",{className:e.drawerContainer,children:[Object(v.jsx)(c.a,{children:["Inbox","Starred","Send email","Drafts"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))}),Object(v.jsx)(u.a,{}),Object(v.jsx)(c.a,{children:["All mail","Trash","Spam"].map(((e,n)=>Object(v.jsxs)(m.a,{button:!0,children:[Object(v.jsx)(d.a,{children:n%2===0?Object(v.jsx)(b.a,{}):Object(v.jsx)(g.a,{})}),Object(v.jsx)(p.a,{primary:e})]},e)))})]})]}),Object(v.jsxs)("main",{className:e.content,children:[Object(v.jsx)(o.a,{}),Object(v.jsx)(l.a,{paragraph:!0,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac."}),Object(v.jsx)(l.a,{paragraph:!0,children:"Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a."})]})]})}},1975:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Drawer from '@material-ui/core/Drawer';\nimport AppBar from '@material-ui/core/AppBar';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport List from '@material-ui/core/List';\nimport Typography from '@material-ui/core/Typography';\nimport Divider from '@material-ui/core/Divider';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport MailIcon from '@material-ui/icons/Mail';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1,\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0,\n },\n drawerPaper: {\n width: drawerWidth,\n },\n drawerContainer: {\n overflow: 'auto',\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3),\n },\n}));\n\nexport default function ClippedDrawer() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <AppBar position=\"fixed\" className={classes.appBar}>\n <Toolbar>\n <Typography variant=\"h6\" noWrap>\n Clipped drawer\n </Typography>\n </Toolbar>\n </AppBar>\n <Drawer\n className={classes.drawer}\n variant=\"permanent\"\n classes={{\n paper: classes.drawerPaper,\n }}\n >\n <Toolbar />\n <div className={classes.drawerContainer}>\n <List>\n {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n <Divider />\n <List>\n {['All mail', 'Trash', 'Spam'].map((text, index) => (\n <ListItem button key={text}>\n <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>\n <ListItemText primary={text} />\n </ListItem>\n ))}\n </List>\n </div>\n </Drawer>\n <main className={classes.content}>\n <Toolbar />\n <Typography paragraph>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum\n facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit\n gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id\n donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit\n adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.\n Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis\n imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget\n arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem\n donec massa sapien faucibus et molestie ac.\n </Typography>\n <Typography paragraph>\n Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla\n facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac\n tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat\n consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed\n vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In\n hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et\n tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin\n nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas\n accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.\n </Typography>\n </main>\n </div>\n );\n}\n"},2581:function(e,n,t){"use strict";t.r(n);var i=t(1130),a=t(118),r=t(1098),s=t(1090),o=t(194),c=t(1072),l=t(1);const u=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return u(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/drawers",target:"_blank",role:"button",children:[Object(l.jsx)(s.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(o.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Drawer"}),Object(l.jsx)(o.a,{className:"description",children:"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."}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/navigation-drawer.html",children:"Navigation drawers"})," ",'(or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.']}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/design/components/sheets-side.html",children:"Side sheets"})," are supplementary surfaces primarily used on tablet and desktop."]}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Temporary drawer"}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected."}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the ",Object(l.jsx)("code",{children:"open"})," prop."]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(i.a,{className:"my-24",iframe:!1,component:t(1958).default,raw:t(1959)})}),Object(l.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Swipeable"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["You can make the drawer swipeable with the ",Object(l.jsx)("code",{children:"SwipeableDrawer"})," component."]}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["This component comes with a 2 kB gzipped payload overhead. Some low-end mobile devices won't be able to follow the fingers at 60 FPS. You can use the"," ",Object(l.jsx)("code",{children:"disableBackdropTransition"})," property to help."]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(i.a,{className:"my-24",iframe:!1,component:t(1960).default,raw:t(1961)})}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"The following properties are used in this documentation website for optimal usability of the component:"}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"iOS is hosted on high-end devices. The backdrop transition can be enabled without dropping frames. The performance will be good enough."}),Object(l.jsx)("li",{children:'iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.'})]}),Object(l.jsx)(a.a,{component:"pre",className:"language-jsx",children:" \nconst iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);\n\n<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />\n"}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Responsive drawer"}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("code",{children:"Hidden"})," responsive helper component allows showing different types of drawer depending on the screen width. A ",Object(l.jsx)("code",{children:"temporary"})," drawer is shown for small screens while a ",Object(l.jsx)("code",{children:"permanent"})," drawer is shown for wider screens."]}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1962).default,raw:t(1963)})}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Persistent drawer"}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user. The state of the drawer is remembered from action to action and session to session."}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport."}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation."}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1964).default,raw:t(1965)}),Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1966).default,raw:t(1967)})]}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Mini variant drawer"}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar. When expanded, it appears as the standard persistent navigation drawer."}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"The mini variant is recommended for apps sections that need quick selection access alongside content."}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1968).default,raw:t(1969)})}),Object(l.jsx)(o.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Permanent drawer"}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed."}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:["Permanent navigation drawers are the ",Object(l.jsx)("strong",{children:"recommended default for desktop"}),"."]}),Object(l.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Full-height navigation"}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"Apps focused on information consumption that use a left-to-right hierarchy."}),Object(l.jsxs)(o.a,{className:"mb-16",component:"div",children:[Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1970).default,raw:t(1971)}),Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1972).default,raw:t(1973)})]}),Object(l.jsx)(o.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Clipped under the app bar"}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:"Apps focused on productivity that require balance across the screen."}),Object(l.jsx)(o.a,{className:"mb-16",component:"div",children:Object(l.jsx)(i.a,{className:"my-24",iframe:!0,component:t(1974).default,raw:t(1975)})})]})}}}]);
Mini Shell