github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/Frame.js (about) 1 import React from 'react'; 2 import { makeStyles } from '@material-ui/core/styles'; 3 import AppBar from '@material-ui/core/AppBar'; 4 import Toolbar from '@material-ui/core/Toolbar'; 5 import Typography from '@material-ui/core/Typography'; 6 import IconButton from '@material-ui/core/IconButton'; 7 import SettingsIcon from '@material-ui/icons/Settings'; 8 import config from '../config'; 9 import { useHistory } from 'react-router-dom'; 10 11 const useStyles = makeStyles(theme => ({ 12 root: { 13 flexGrow: 1, 14 }, 15 title: { 16 flexGrow: 1, 17 color: theme.palette.common.white, 18 }, 19 settings: { 20 color: theme.palette.common.white, 21 }, 22 })); 23 24 export default function Frame({ children }) { 25 const classes = useStyles(); 26 const history = useHistory(); 27 28 return ( 29 <div className={classes.root}> 30 <AppBar position="fixed"> 31 <Toolbar> 32 <Typography variant="h6" className={classes.title}> 33 {config.project.name} 34 </Typography> 35 <IconButton className={classes.settings} onClick={() => history.push('/settings')}> 36 <SettingsIcon /> 37 </IconButton> 38 </Toolbar> 39 </AppBar> 40 {children} 41 </div> 42 ); 43 }