import React , { useState } from "react" ; import "./view-base.scss" ; import Header from "../Header" ; import { Hidden , makeStyles , useMediaQuery } from "@material-ui/core" ; import { DRAWER_WIDTH , TRANSITION_DURATION } from "../../constants/style" ; import MobileDrawer from "../Drawer/mobile-drawer" ; import Drawer from "../Drawer" ; import { cubesImage } from "src/constants/img" ; import Messages from "../Messages" ; interface IViewBaseProps { children : React . ReactNode ; } const useStyles = makeStyles ( theme => ( { drawer : { [ theme . breakpoints . up ( "md" ) ] : { width : DRAWER_WIDTH , flexShrink : 0 , } , } , content : { padding : theme . spacing ( 1 ) , transition : theme . transitions . create ( "margin" , { easing : theme . transitions . easing . sharp , duration : TRANSITION_DURATION , } ) , height : "100%" , overflow : "auto" , marginLeft : DRAWER_WIDTH , } , contentShift : { transition : theme . transitions . create ( "margin" , { easing : theme . transitions . easing . easeOut , duration : TRANSITION_DURATION , } ) , marginLeft : 0 , } , } ) ) ; function ViewBase ( { children } ) { const classes = useStyles ( ) ; const [ mobileOpen , setMobileOpen ] = useState ( false ) ; const isSmallerScreen = useMediaQuery ( "(max-width: 960px)" ) ; const isSmallScreen = useMediaQuery ( "(max-width: 600px)" ) ; const handleDrawerToggle = ( ) => { setMobileOpen ( ! mobileOpen ) ; } ; return ( < div className = "view-base-root" > < Messages /> < Header drawe = { ! isSmallerScreen } handleDrawerToggle = { handleDrawerToggle } / > < div className = { classes . drawer } > < Hidden mdUp > < MobileDrawer mobileOpen = { mobileOpen } handleDrawerToggle = { handleDrawerToggle } / > < /Hidden> < Hidden smDown > < Drawer /> < /Hidden> < /div> < div className = { `${ classes . content } ${ isSmallerScreen && classes . contentShift }` } > { ! isSmallerScreen && ( < div className = "cubes-top" > < p > { cubesImage } < /p> < /div>)} { ! isSmallScreen && ( < div className = "cubes-bottom" > < p > { cubesImage } < /p> < /div>)} { children } < /div> < /div>); } export default ViewBase ;