github.com/arieschain/arieschain@v0.0.0-20191023063405-37c074544356/dashboard/assets/components/Header.jsx (about)

     1  // @flow
     2  
     3  
     4  import React, {Component} from 'react';
     5  
     6  import withStyles from 'material-ui/styles/withStyles';
     7  import AppBar from 'material-ui/AppBar';
     8  import Toolbar from 'material-ui/Toolbar';
     9  import IconButton from 'material-ui/IconButton';
    10  import Icon from 'material-ui/Icon';
    11  import MenuIcon from 'material-ui-icons/Menu';
    12  import Typography from 'material-ui/Typography';
    13  
    14  // themeStyles returns the styles generated from the theme for the component.
    15  const themeStyles = (theme: Object) => ({
    16  	header: {
    17  		backgroundColor: theme.palette.grey[900],
    18  		color:           theme.palette.getContrastText(theme.palette.grey[900]),
    19  		zIndex:          theme.zIndex.appBar,
    20  	},
    21  	toolbar: {
    22  		paddingLeft:  theme.spacing.unit,
    23  		paddingRight: theme.spacing.unit,
    24  	},
    25  	title: {
    26  		paddingLeft: theme.spacing.unit,
    27  		fontSize:    3 * theme.spacing.unit,
    28  	},
    29  });
    30  
    31  export type Props = {
    32  	classes: Object, // injected by withStyles()
    33  	switchSideBar: () => void,
    34  };
    35  
    36  // Header renders the header of the dashboard.
    37  class Header extends Component<Props> {
    38  	render() {
    39  		const {classes} = this.props;
    40  
    41  		return (
    42  			<AppBar position='static' className={classes.header}>
    43  				<Toolbar className={classes.toolbar}>
    44  					<IconButton onClick={this.props.switchSideBar}>
    45  						<Icon>
    46  							<MenuIcon />
    47  						</Icon>
    48  					</IconButton>
    49  					<Typography type='title' color='inherit' noWrap className={classes.title}>
    50  						Go Ethereum Dashboard
    51  					</Typography>
    52  				</Toolbar>
    53  			</AppBar>
    54  		);
    55  	}
    56  }
    57  
    58  export default withStyles(themeStyles)(Header);