import AppBar from '@material-ui/core/AppBar' ; import Drawer from '@material-ui/core/Drawer' ; import Hidden from '@material-ui/core/Hidden' ; import GitHubForkRibbon from 'react-github-fork-ribbon' ; import IconButton from '@material-ui/core/IconButton' ; import type { Theme } from '@material-ui/core/styles' ; import { createStyles , makeStyles , useTheme } from '@material-ui/core/styles' ; import Toolbar from '@material-ui/core/Toolbar' ; import Typography from '@material-ui/core/Typography' ; import MenuIcon from '@material-ui/icons/Menu' ; import { VERSION } from '@react-page/editor' ; import React from 'react' ; import Navigation from './Navigation' ; const drawerWidth = 240 ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { display : 'flex' , } , drawer : { [ theme . breakpoints . up ( 'sm' ) ] : { width : drawerWidth , flexShrink : 0 , } , } , appBar : { [ theme . breakpoints . up ( 'sm' ) ] : { width : `calc(100% - ${ drawerWidth }px)` , marginLeft : drawerWidth , } , } , menuButton : { marginRight : theme . spacing ( 2 ) , [ theme . breakpoints . up ( 'sm' ) ] : { display : 'none' , } , } , toolbar : theme . mixins . toolbar , drawerPaper : { width : drawerWidth , zIndex : 0 , } , main : { flexGrow : 1 , padding : theme . spacing ( 4 ) , backgroundColor : '#eee' , } , content : { flexGrow : 1 , padding : theme . spacing ( 4 ) , backgroundColor : 'white' , maxWidth : 1280 , margin : 'auto' , } , } ) ) ; const PageLayout = ( { children } ) => { const classes = useStyles ( ) ; const theme = useTheme ( ) ; const [ mobileOpen , setMobileOpen ] = React . useState ( false ) ; const handleDrawerToggle = ( ) => { setMobileOpen ( ! mobileOpen ) ; } ; const drawer = < Navigation />; return ( < > < GitHubForkRibbon href = "//github.com/react-page/react-page" target = "_blank" position = "right" color = "black" > Fork me on GitHub < /GitHubForkRibbon> < div className = { classes . root } > < 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 > React Page { VERSION } < /Typography> < /Toolbar> < /AppBar> < nav className = { classes . drawer } > { } < Hidden smUp implementation = "css" > < Drawer 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 . main } > < div className = { classes . toolbar } /> < div className = { classes . content } > { children } < /div> < /main> < /div> < />); } ; export default PageLayout ;