import React , { useState , useCallback , FC } from 'react' ; import clsx from 'clsx' ; import CssBaseline from '@material-ui/core/CssBaseline' ; import ErrorBoundary from 'containers/ErrorBoundary' ; import NavBar from './NavBar' ; import TopBar from './TopBar' ; import useStyles from './styles' ; const MainLayout = ( { children } ) => { const classes = useStyles ( ) ; const [ isDrawer , setIsDrawer ] = useState ( true ) ; const _handleToogleDrawer = useCallback ( ( ) => { setIsDrawer ( ! isDrawer ) ; } , [ isDrawer ] ) ; return ( < div className = { classes . root } > < CssBaseline /> < TopBar isDrawer = { isDrawer } handleToogleDrawer = { _handleToogleDrawer } / > < NavBar isDrawer = { isDrawer } /> < main className = { clsx ( classes . content , { [ classes . contentShift ] : isDrawer , } ) } > < div className = { classes . toolbar } /> < ErrorBoundary > { children } < /ErrorBoundary> < /main> < /div>); } ; export default MainLayout ;