{"size": 2558, "ext": "js", "max_stars_repo_path": "src/containers/Header.js", "max_stars_repo_name": "saylorsd/green-dream", "max_stars_repo_stars_event_min_datetime": "2019-07-22T07:25:34.000Z", "max_stars_repo_stars_event_max_datetime": "2019-07-22T07:25:34.000Z", "max_issues_repo_path": "src/containers/Header.js", "max_issues_repo_name": "saylorsd/green-dream", "max_issues_repo_issues_event_min_datetime": "2018-10-04T19:41:01.000Z", "max_issues_repo_issues_event_max_datetime": "2019-05-08T17:16:36.000Z", "max_forks_repo_path": "src/containers/Header.js", "max_forks_repo_name": "WPRDC/green-dream", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 31, "max_forks_count": null, "avg_line_length": 25.0784313725, "max_line_length": 90, "alphanum_fraction": 0.6039874902}
import React from "react";
import {connect} from "react-redux";
import {withStyles} from "@material-ui/core/styles";

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ToolTip from "@material-ui/core/Tooltip"
import Button from "@material-ui/core/Button";
import Search from "./Search";

import {toggleLayerMenu} from "../actions/mapActions";
import {openAboutDialog} from "../actions/dataActions";

const styles = theme => ({
  root: {
    flexGrow: 0,
    zIndex: theme.zIndex.drawer + 1,
    position: "static",
    height: 64,
    overflow: "hidden"
  },
  flex: {
    flex: 1,
    fontFamily: 'Roboto Condensed, sans-serif'
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  },
  icon: {
    height: "40px",
    marginLeft: '6px',
    display: 'table-row',
  },
  plus: {
    margin: '0 6px',
    fontSize: '24px',
  },
  link: {
    display: 'table',
    width: '122px'
  }
});

const Header = props => {
  const {classes, toggleMenu, openAbout, title} = props;

  return (
    <AppBar className={classes.root}>
      <Toolbar>
        <IconButton
          color="inherit"
          aria-label="Menu"
          className={classes.menuButton}
          onClick={toggleMenu}
        >
          <ToolTip title={"Toggle Layer Menu"} placement="bottom-start">
            <MenuIcon/>
          </ToolTip>
        </IconButton>
        <Typography variant="title" color="inherit" className={classes.flex}>
          {title}
        </Typography>



        <a target="_blank" href="https://alleghenylandtrust.org" className={classes.link}>
          <img
            src={require("../assets/img/alt-logo-wide.svg")}
            className={classes.icon}
          />
        </a>
        <span className={classes.plus}>  </span>

        <a target="_blank" href="https://wprdc.org" className={classes.link}>
          <img
            src={require("../assets/img/white_logo.svg")}
            className={classes.icon}
          />
        </a>
        <Search/>

        <Button variant="contained" color="secondary" onClick={openAbout}>About</Button>


      </Toolbar>
    </AppBar>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    toggleMenu: () => dispatch(toggleLayerMenu()),
    openAbout: () => dispatch(openAboutDialog())
  };
};

export default connect(null, mapDispatchToProps)(withStyles(styles)(Header));
