TopBar.js

import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
//§import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import Button from '@material-ui/core/Button';
import { Link, NavLink } from 'react-router-dom';

const styles = theme => ({
  root: {
    //width: '100%',
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginRight: theme.spacing.unit * 2,
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing.unit * 3,
      width: 'auto',
    },
  },
  searchIcon: {
    width: theme.spacing.unit * 9,
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
    width: '100%',
  },
  inputInput: {
    paddingTop: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
    paddingLeft: theme.spacing.unit * 10,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('md')]: {
      width: 200,
    },
  },
  sectionDesktop: {
    display: 'none',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
    },
  },
  sectionMobile: {
    display: 'flex',
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
  appBarButton: {
    color: 'white !important'
  },
  appBarButtonActive: {
    border: '1px solid white'
  }
});

class TopBar extends React.Component {
  state = {
    anchorEl: null,
    mobileMoreAnchorEl: null,
  };

  handleProfileMenuOpen = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleMenuClose = () => {
    this.setState({ anchorEl: null });
    this.handleMobileMenuClose();
  };

  handleMobileMenuOpen = event => {
    this.setState({ mobileMoreAnchorEl: event.currentTarget });
  };

  handleMobileMenuClose = () => {
    this.setState({ mobileMoreAnchorEl: null });
  };

  render() {
    const { anchorEl, mobileMoreAnchorEl } = this.state;
    const { classes } = this.props;
    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

    const renderMenu = (
      <Menu
        anchorEl={anchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={isMenuOpen}
        onClose={this.handleMenuClose}
      >
        <MenuItem onClick={this.handleMenuClose}>Profile</MenuItem>
        <MenuItem onClick={this.handleMenuClose}>My account</MenuItem>
      </Menu>
    );

    const renderMobileMenu = (
      <Menu
        anchorEl={mobileMoreAnchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={isMobileMenuOpen}
        onClose={this.handleMobileMenuClose}
      >
        <MenuItem>
          <IconButton color="inherit">
            <Badge badgeContent={4} color="secondary">
              <MailIcon />
            </Badge>
          </IconButton>
          <p>Messages</p>
        </MenuItem>
        <MenuItem>
          <IconButton color="inherit">
            <Badge badgeContent={11} color="secondary">
              <NotificationsIcon />
            </Badge>
          </IconButton>
          <p>Notifications</p>
        </MenuItem>
        <MenuItem onClick={this.handleProfileMenuOpen}>
          <IconButton color="inherit">
            <AccountCircle />
          </IconButton>
          <p>Profile</p>
        </MenuItem>
      </Menu>
    );

    const ManuscriptsLink = props => (
      <NavLink
        to="/manuscripts"
        className={classes.appBarButton}
        isActive={(match, location) => location.pathname.startsWith('/manuscripts')}
        activeClassName={classes.appBarButtonActive}
        {...props}
      />);

    const WorksLink = props => (
      <NavLink
        to="/works"
        className={classes.appBarButton}
        isActive={(match, location) => location.pathname.startsWith('/works')}
        activeClassName={classes.appBarButtonActive}
        {...props}
      />);

    const PeopleLink = props => (
      <NavLink
        to="/people"
        className={classes.appBarButton}
        isActive={(match, location) => location.pathname.startsWith('/people')}
        activeClassName={classes.appBarButtonActive}
        {...props}
      />);

    const OrganizationsLink = props => (
      <NavLink
        to="/organizations"
        className={classes.appBarButton}
        isActive={(match, location) => location.pathname.startsWith('/organizations')}
        activeClassName={classes.appBarButtonActive}
        {...props}
      />);

    const PlacesLink = props => (
      <NavLink
        to="/places"
        className={classes.appBarButton}
        isActive={(match, location) => location.pathname.startsWith('/places')}
        activeClassName={classes.appBarButtonActive}
        {...props}
      />);

    return (
      <div className={classes.root}>
        <AppBar position="absolute">
          <Toolbar>
            <Button
              className={classes.appBarButton}
              component={Link}
              to='/'
            >
              <Typography className={classes.title} variant="h6" color="inherit" noWrap>
                MMM
              </Typography>
            </Button>
            <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                disabled
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
              />
            </div>
            <div className={classes.grow} />
            <div className={classes.sectionDesktop}>
              <Button
                className={classes.appBarButton}
                component={ManuscriptsLink}>
                manuscripts
              </Button>
              <Button
                className={classes.appBarButton}
                component={WorksLink}>
                works
              </Button>
              <Button disabled className={classes.appBarButton}>Events</Button>
              <Button
                className={classes.appBarButton}
                component={PeopleLink}>
                people
              </Button>
              <Button
                className={classes.appBarButton}
                component={OrganizationsLink}>
                organizations
              </Button>
              <Button
                className={classes.appBarButton}
                component={PlacesLink}>
                places
              </Button>
            </div>
            <div className={classes.sectionMobile}>
              <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="inherit">
                <MoreIcon />
              </IconButton>
            </div>
          </Toolbar>
        </AppBar>
        {renderMenu}
        {renderMobileMenu}
      </div>
    );
  }
}

TopBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TopBar);

// <IconButton
//   className={classes.menuButton}
//   color="inherit"
//   aria-label="Menu"
//   onClick={this.handleClick}
// >
//   <MenuIcon />
// </IconButton>
//
// <Menu
//   id="simple-menu"
//   anchorEl={anchorEl}
//   open={Boolean(anchorEl)}
//   onClose={this.handleClose}
// >
//   <div className={classes.menuContent}>
//
//
//     <FormControl component="fieldset" className={classes.formControl}>
//       <FormLabel component="legend">Map mode</FormLabel>
//       <RadioGroup
//         className={classes.formGroup}
//         aria-label="Map mode"
//         name="map"
//         value={this.props.mapMode}
//         onChange={this.handleChange}
//       >
//         <FormControlLabel value="cluster" control={<Radio />} label="Clustered markers" />
//         <FormControlLabel value="noCluster" control={<Radio />} label="Markers" />
//
//       </RadioGroup>
//     </FormControl>
//
//
//
//   </div>
//
// </Menu>