| 1 |
- {"ast":null,"code":"var _jsxFileName = \"/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/SearchBar.js\";\nimport 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';\nconst drawerWidth = 240;\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}));\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 /*#__PURE__*/React.createElement(\"div\", {\n className: classes.root,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 98,\n columnNumber: 14\n }\n }, /*#__PURE__*/React.createElement(CssBaseline, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 100,\n columnNumber: 9\n }\n }), /*#__PURE__*/React.createElement(AppBar, {\n position: \"fixed\",\n className: clsx(classes.appBar, {\n [classes.appBarShift]: open\n }),\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 102,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(Toolbar, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 109,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(IconButton, {\n color: \"inherit\",\n onClick: handleDrawerOpen,\n edge: \"start\",\n className: clsx(classes.menuButton, {\n [classes.hide]: open\n }),\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 111,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(MenuIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 120,\n columnNumber: 9\n }\n })), \" \", /*#__PURE__*/React.createElement(Typography, {\n variant: \"h6\",\n noWrap: true,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 123,\n columnNumber: 22\n }\n }, \"Mini variant drawer \"), \" \"), \" \"), \" \", /*#__PURE__*/React.createElement(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 __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 129,\n columnNumber: 18\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.toolbar,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 145,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(IconButton, {\n onClick: handleDrawerClose,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 147,\n columnNumber: 9\n }\n }, \" \", theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(ChevronRightIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 148,\n columnNumber: 84\n }\n }) : /*#__PURE__*/React.createElement(ChevronLeftIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 148,\n columnNumber: 109\n }\n }), \" \"), \" \"), \" \", /*#__PURE__*/React.createElement(Divider, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 150,\n columnNumber: 15\n }\n }), /*#__PURE__*/React.createElement(List, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 152,\n columnNumber: 9\n }\n }, \" \", ['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => /*#__PURE__*/React.createElement(ListItem, {\n button: true,\n key: text,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 154,\n columnNumber: 81\n }\n }, /*#__PURE__*/React.createElement(ListItemIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 156,\n columnNumber: 17\n }\n }, \" \", index % 2 === 0 ? /*#__PURE__*/React.createElement(InboxIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 52\n }\n }) : /*#__PURE__*/React.createElement(MailIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 70\n }\n }), \" \"), \" \", /*#__PURE__*/React.createElement(ListItemText, {\n primary: text,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 104\n }\n }), \" \")), \" \"), \" \", /*#__PURE__*/React.createElement(Divider, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 163,\n columnNumber: 16\n }\n }), /*#__PURE__*/React.createElement(List, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 165,\n columnNumber: 9\n }\n }, \" \", ['All mail', 'Trash', 'Spam'].map((text, index) => /*#__PURE__*/React.createElement(ListItem, {\n button: true,\n key: text,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 167,\n columnNumber: 66\n }\n }, /*#__PURE__*/React.createElement(ListItemIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 169,\n columnNumber: 17\n }\n }, \" \", index % 2 === 0 ? /*#__PURE__*/React.createElement(InboxIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 52\n }\n }) : /*#__PURE__*/React.createElement(MailIcon, {\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 70\n }\n }), \" \"), \" \", /*#__PURE__*/React.createElement(ListItemText, {\n primary: text,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 170,\n columnNumber: 104\n }\n }), \" \")), \" \"), \" \"), \" \", /*#__PURE__*/React.createElement(\"main\", {\n className: classes.content,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 177,\n columnNumber: 18\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.toolbar,\n __self: this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 179,\n columnNumber: 9\n }\n }), \" \"), \" \");\n}","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/src/SearchBar.js"],"names":["React","clsx","makeStyles","useTheme","Drawer","AppBar","Toolbar","List","CssBaseline","Typography","Divider","IconButton","MenuIcon","ChevronLeftIcon","ChevronRightIcon","ListItem","ListItemIcon","ListItemText","InboxIcon","MailIcon","drawerWidth","useStyles","theme","root","display","appBar","zIndex","drawer","transition","transitions","create","easing","sharp","duration","leavingScreen","appBarShift","marginLeft","width","enteringScreen","menuButton","marginRight","hide","flexShrink","whiteSpace","drawerOpen","drawerClose","overflowX","spacing","breakpoints","up","toolbar","alignItems","justifyContent","padding","mixins","content","flexGrow","MiniDrawer","classes","open","setOpen","useState","handleDrawerOpen","handleDrawerClose","paper","direction","map","text","index"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,UAAT,EAAqBC,QAArB,QAAqC,0BAArC;AACA,OAAOC,MAAP,MAAmB,0BAAnB;AACA,OAAOC,MAAP,MAAmB,0BAAnB;AACA,OAAOC,OAAP,MAAoB,2BAApB;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,WAAP,MAAwB,+BAAxB;AACA,OAAOC,UAAP,MAAuB,8BAAvB;AACA,OAAOC,OAAP,MAAoB,2BAApB;AACA,OAAOC,UAAP,MAAuB,8BAAvB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,OAAOC,eAAP,MAA4B,gCAA5B;AACA,OAAOC,gBAAP,MAA6B,iCAA7B;AACA,OAAOC,QAAP,MAAqB,4BAArB;AACA,OAAOC,YAAP,MAAyB,gCAAzB;AACA,OAAOC,YAAP,MAAyB,gCAAzB;AACA,OAAOC,SAAP,MAAsB,gCAAtB;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAEA,MAAMC,WAAW,GAAG,GAApB;AAEA,MAAMC,SAAS,GAAGnB,UAAU,CAAEoB,KAAD,KAAY;AACrCC,EAAAA,IAAI,EAAE;AACFC,IAAAA,OAAO,EAAE;AADP,GAD+B;AAIrCC,EAAAA,MAAM,EAAE;AACJC,IAAAA,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC,MAAb,GAAsB,CAD1B;AAEJC,IAAAA,UAAU,EAAEN,KAAK,CAACO,WAAN,CAAkBC,MAAlB,CAAyB,CAAC,OAAD,EAAU,QAAV,CAAzB,EAA8C;AACtDC,MAAAA,MAAM,EAAET,KAAK,CAACO,WAAN,CAAkBE,MAAlB,CAAyBC,KADqB;AAEtDC,MAAAA,QAAQ,EAAEX,KAAK,CAACO,WAAN,CAAkBI,QAAlB,CAA2BC;AAFiB,KAA9C;AAFR,GAJ6B;AAWrCC,EAAAA,WAAW,EAAE;AACTC,IAAAA,UAAU,EAAEhB,WADH;AAETiB,IAAAA,KAAK,EAAG,eAAcjB,WAAY,KAFzB;AAGTQ,IAAAA,UAAU,EAAEN,KAAK,CAACO,WAAN,CAAkBC,MAAlB,CAAyB,CAAC,OAAD,EAAU,QAAV,CAAzB,EAA8C;AACtDC,MAAAA,MAAM,EAAET,KAAK,CAACO,WAAN,CAAkBE,MAAlB,CAAyBC,KADqB;AAEtDC,MAAAA,QAAQ,EAAEX,KAAK,CAACO,WAAN,CAAkBI,QAAlB,CAA2BK;AAFiB,KAA9C;AAHH,GAXwB;AAmBrCC,EAAAA,UAAU,EAAE;AACRC,IAAAA,WAAW,EAAE;AADL,GAnByB;AAsBrCC,EAAAA,IAAI,EAAE;AACFjB,IAAAA,OAAO,EAAE;AADP,GAtB+B;AAyBrCG,EAAAA,MAAM,EAAE;AACJU,IAAAA,KAAK,EAAEjB,WADH;AAEJsB,IAAAA,UAAU,EAAE,CAFR;AAGJC,IAAAA,UAAU,EAAE;AAHR,GAzB6B;AA8BrCC,EAAAA,UAAU,EAAE;AACRP,IAAAA,KAAK,EAAEjB,WADC;AAERQ,IAAAA,UAAU,EAAEN,KAAK,CAACO,WAAN,CAAkBC,MAAlB,CAAyB,OAAzB,EAAkC;AAC1CC,MAAAA,MAAM,EAAET,KAAK,CAACO,WAAN,CAAkBE,MAAlB,CAAyBC,KADS;AAE1CC,MAAAA,QAAQ,EAAEX,KAAK,CAACO,WAAN,CAAkBI,QAAlB,CAA2BK;AAFK,KAAlC;AAFJ,GA9ByB;AAqCrCO,EAAAA,WAAW,EAAE;AACTjB,IAAAA,UAAU,EAAEN,KAAK,CAACO,WAAN,CAAkBC,MAAlB,CAAyB,OAAzB,EAAkC;AAC1CC,MAAAA,MAAM,EAAET,KAAK,CAACO,WAAN,CAAkBE,MAAlB,CAAyBC,KADS;AAE1CC,MAAAA,QAAQ,EAAEX,KAAK,CAACO,WAAN,CAAkBI,QAAlB,CAA2BC;AAFK,KAAlC,CADH;AAKTY,IAAAA,SAAS,EAAE,QALF;AAMTT,IAAAA,KAAK,EAAEf,KAAK,CAACyB,OAAN,CAAc,CAAd,IAAmB,CANjB;AAOT,KAACzB,KAAK,CAAC0B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;AAC1BZ,MAAAA,KAAK,EAAEf,KAAK,CAACyB,OAAN,CAAc,CAAd,IAAmB;AADA;AAPrB,GArCwB;AAgDrCG,EAAAA,OAAO,EAAE;AACL1B,IAAAA,OAAO,EAAE,MADJ;AAEL2B,IAAAA,UAAU,EAAE,QAFP;AAGLC,IAAAA,cAAc,EAAE,UAHX;AAILC,IAAAA,OAAO,EAAE/B,KAAK,CAACyB,OAAN,CAAc,CAAd,EAAiB,CAAjB,CAJJ;AAKL;AACA,OAAGzB,KAAK,CAACgC,MAAN,CAAaJ;AANX,GAhD4B;AAwDrCK,EAAAA,OAAO,EAAE;AACLC,IAAAA,QAAQ,EAAE,CADL;AAELH,IAAAA,OAAO,EAAE/B,KAAK,CAACyB,OAAN,CAAc,CAAd;AAFJ;AAxD4B,CAAZ,CAAD,CAA5B;AA8DA,eAAe,SAASU,UAAT,GAAsB;AACjC,QAAMC,OAAO,GAAGrC,SAAS,EAAzB;AACA,QAAMC,KAAK,GAAGnB,QAAQ,EAAtB;AACA,QAAM,CAACwD,IAAD,EAAOC,OAAP,IAAkB5D,KAAK,CAAC6D,QAAN,CAAe,KAAf,CAAxB;;AAEA,QAAMC,gBAAgB,GAAG,MAAM;AAC3BF,IAAAA,OAAO,CAAC,IAAD,CAAP;AACH,GAFD;;AAIA,QAAMG,iBAAiB,GAAG,MAAM;AAC5BH,IAAAA,OAAO,CAAC,KAAD,CAAP;AACH,GAFD;;AAIA,sBAAS;AACD,IAAA,SAAS,EAAKF,OAAO,CAACnC,IADrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEL,oBACA,WADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFK,eAIL,oBACA,MADA;AACO,IAAA,QAAQ,EAAG,OADlB;AAEA,IAAA,SAAS,EACLtB,IAAI,CAACyD,OAAO,CAACjC,MAAT,EAAiB;AACjB,OAACiC,OAAO,CAACvB,WAAT,GAAuBwB;AADN,KAAjB,CAHR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOA,oBACA,OADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEA,oBACA,UADA;AACW,IAAA,KAAK,EAAG,SADnB;AAEA,IAAA,OAAO,EAAKG,gBAFZ;AAGA,IAAA,IAAI,EAAG,OAHP;AAIA,IAAA,SAAS,EACL7D,IAAI,CAACyD,OAAO,CAACnB,UAAT,EAAqB;AACrB,OAACmB,OAAO,CAACjB,IAAT,GAAgBkB;AADK,KAArB,CALR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASA,oBACA,QADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IATA,CAFA,oBAca,oBACb,UADa;AACF,IAAA,OAAO,EAAG,IADR;AAEb,IAAA,MAAM,MAFO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAdb,MAPA,MAJK,oBA+BI,oBACT,MADS;AACF,IAAA,OAAO,EAAG,WADR;AAET,IAAA,SAAS,EACL1D,IAAI,CAACyD,OAAO,CAAC/B,MAAT,EAAiB;AACjB,OAAC+B,OAAO,CAACd,UAAT,GAAsBe,IADL;AAEjB,OAACD,OAAO,CAACb,WAAT,GAAuB,CAACc;AAFP,KAAjB,CAHC;AAQT,IAAA,OAAO,EACH;AACIK,MAAAA,KAAK,EAAE/D,IAAI,CAAC;AACR,SAACyD,OAAO,CAACd,UAAT,GAAsBe,IADd;AAER,SAACD,OAAO,CAACb,WAAT,GAAuB,CAACc;AAFhB,OAAD;AADf,KATK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBT;AACI,IAAA,SAAS,EAAKD,OAAO,CAACR,OAD1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEA,oBACA,UADA;AACW,IAAA,OAAO,EAAKa,iBADvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAC+CzC,KAAK,CAAC2C,SAAN,KAAoB,KAApB,gBAA4B,oBAAE,gBAAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAA5B,gBAAqD,oBAAE,eAAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADpG,MAFA,MAhBS,oBAqBH,oBACN,OADM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IArBG,eAuBT,oBACA,IADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAEI,CAAC,OAAD,EAAU,SAAV,EAAqB,YAArB,EAAmC,QAAnC,EAA6CC,GAA7C,CAAiD,CAACC,IAAD,EAAOC,KAAP,kBAAmB,oBAChE,QADgE;AACvD,IAAA,MAAM,MADiD;AAChD,IAAA,GAAG,EAAKD,IADwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEhE,oBACA,YADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UACiBC,KAAK,GAAG,CAAR,KAAc,CAAd,gBAAkB,oBAAE,SAAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAlB,gBAAoC,oBAAE,QAAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADrD,MAFgE,oBAGuB,oBACvF,YADuF;AAC1E,IAAA,OAAO,EAAKD,IAD8D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAHvB,MAApE,CAFJ,MAvBS,oBAkCF,oBACP,OADO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAlCE,eAoCT,oBACA,IADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAEI,CAAC,UAAD,EAAa,OAAb,EAAsB,MAAtB,EAA8BD,GAA9B,CAAkC,CAACC,IAAD,EAAOC,KAAP,kBAAmB,oBACjD,QADiD;AACxC,IAAA,MAAM,MADkC;AACjC,IAAA,GAAG,EAAKD,IADyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAEjD,oBACA,YADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UACiBC,KAAK,GAAG,CAAR,KAAc,CAAd,gBAAkB,oBAAE,SAAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAlB,gBAAoC,oBAAE,QAAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADrD,MAFiD,oBAGsC,oBACvF,YADuF;AAC1E,IAAA,OAAO,EAAKD,IAD8D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAHtC,MAArD,CAFJ,MApCS,MA/BJ,oBA+EI;AACJ,IAAA,SAAS,EAAKT,OAAO,CAACH,OADlB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAET;AACI,IAAA,SAAS,EAAKG,OAAO,CAACR,OAD1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFS,MA/EJ,MAAT;AAuFH","sourcesContent":["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 <\n CssBaseline / >\n <\n AppBar position = \"fixed\"\n className = {\n clsx(classes.appBar, {\n [classes.appBarShift]: open,\n })\n } >\n <\n Toolbar >\n <\n IconButton color = \"inherit\"\n onClick = { handleDrawerOpen }\n edge = \"start\"\n className = {\n clsx(classes.menuButton, {\n [classes.hide]: open,\n })\n } >\n <\n MenuIcon / >\n <\n /IconButton> <\n Typography variant = \"h6\"\n noWrap >\n Mini variant drawer <\n /Typography> < /\n Toolbar > <\n /AppBar> <\n Drawer variant = \"permanent\"\n className = {\n clsx(classes.drawer, {\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open,\n })\n }\n classes = {\n {\n paper: clsx({\n [classes.drawerOpen]: open,\n [classes.drawerClose]: !open,\n }),\n }\n } >\n <\n div className = { classes.toolbar } >\n <\n IconButton onClick = { handleDrawerClose } > { theme.direction === 'rtl' ? < ChevronRightIcon / > : < ChevronLeftIcon / > } <\n /IconButton> < /\n div > <\n Divider / >\n <\n List > {\n ['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( <\n ListItem button key = { text } >\n <\n ListItemIcon > { index % 2 === 0 ? < InboxIcon / > : < MailIcon / > } < /ListItemIcon> <\n ListItemText primary = { text }\n /> < /\n ListItem >\n ))\n } <\n /List> <\n Divider / >\n <\n List > {\n ['All mail', 'Trash', 'Spam'].map((text, index) => ( <\n ListItem button key = { text } >\n <\n ListItemIcon > { index % 2 === 0 ? < InboxIcon / > : < MailIcon / > } < /ListItemIcon> <\n ListItemText primary = { text }\n /> < /\n ListItem >\n ))\n } <\n /List> < /\n Drawer > <\n main className = { classes.content } >\n <\n div className = { classes.toolbar }\n /> < /\n main > <\n /div>\n );\n}"]},"metadata":{},"sourceType":"module"}
|
