import React from 'react' ; import AppBar from '@material-ui/core/AppBar' ; import CssBaseline from '@material-ui/core/CssBaseline' ; import Divider from '@material-ui/core/Divider' ; import Drawer from '@material-ui/core/Drawer' ; import Hidden from '@material-ui/core/Hidden' ; import IconButton from '@material-ui/core/IconButton' ; import List from '@material-ui/core/List' ; import ListItem from '@material-ui/core/ListItem' ; import ListItemIcon from '@material-ui/core/ListItemIcon' ; import ListItemText from '@material-ui/core/ListItemText' ; import DashboardIcon from '@material-ui/icons/Dashboard' ; import MenuIcon from '@material-ui/icons/Menu' ; import Toolbar from '@material-ui/core/Toolbar' ; import Typography from '@material-ui/core/Typography' ; import { makeStyles , useTheme , Theme , createStyles } from '@material-ui/core/styles' ; import { User } from './User' ; const drawerWidth = 240 ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { display : 'flex' , color : '#fff' , } , drawer : { [ theme . breakpoints . up ( 'sm' ) ] : { width : drawerWidth , flexShrink : 0 , } , } , appBar : { marginLeft : drawerWidth , [ theme . breakpoints . up ( 'sm' ) ] : { width : `calc(100% - ${ drawerWidth }px)` , } , } , menuButton : { marginRight : theme . spacing ( 2 ) , [ theme . breakpoints . up ( 'sm' ) ] : { display : 'none' , } , } , toolbar : theme . mixins . toolbar , drawerPaper : { width : drawerWidth , backgroundColor : theme . palette . primary . main } , content : { flexGrow : 1 , } , menuItem : { color : '#fff' , } , } ) ) ; interface LayoutProps { /**
     * Injected by the documentation to work in an iframe.
     * You won't need it on your project.
     */ container ? : Element ; } export const Layout = ( props ) => { const { container } = props ; const classes = useStyles ( ) ; const theme = useTheme ( ) ; const [ mobileOpen , setMobileOpen ] = React . useState ( false ) ; function handleDrawerToggle ( ) { setMobileOpen ( ! mobileOpen ) ; } const drawer = ( < div > < div className = { classes . toolbar } / > < Divider /> < List > { [ 'Info' ] . map ( ( text ) => ( < ListItem button key = { text } className = { classes . menuItem } > < ListItemIcon className = { classes . menuItem } > < DashboardIcon /></ListItemIcon > < ListItemText primary = { text } / > < /ListItem>))} < /List> < /div>); return ( < div className = { classes . root } > < CssBaseline /> < AppBar position = "fixed" className = { classes . appBar } > < Toolbar > < IconButton color = "inherit" aria - label = "open drawer" edge = "start" onClick = { handleDrawerToggle } className = { classes . menuButton } > < MenuIcon /> < /IconButton> < Typography variant = "h6" noWrap > Nitro 🚀 < /Typography> < User / > < /Toolbar> < /AppBar> < nav className = { classes . drawer } aria - label = "mailbox folders" > { } < Hidden smUp implementation = "css" > < Drawer container = { container } variant = "temporary" anchor = { theme . direction === 'rtl' ? 'right' : 'left' } open = { mobileOpen } onClose = { handleDrawerToggle } classes = { { paper : classes . drawerPaper , } } ModalProps = { { keepMounted : true , } } > { drawer } < /Drawer> < /Hidden> < Hidden xsDown implementation = "css" > < Drawer classes = { { paper : classes . drawerPaper , } } variant = "permanent" open > { drawer } < /Drawer> < /Hidden> < /nav> < main className = { classes . content } > < div className = { classes . toolbar } /> { props . children } < /main> < /div>); } ;