CODEWITHSUNDEEP
reactjsmaterial-ui
shak.s
shak.s

Reputation: 429

Menu Icon in App Bar

So I was wondering how I create a menu that pops up on the left side when someone clicks the menu icon on the app bar. Just to be clear I am talking about the appbar with buttons. Here's the code for it:

import React from 'react';
import PropTypes from 'prop-types';
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 Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const styles = {
  root: {
    flexGrow: 1,
  },
  flex: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon /> //I want a menu to pop up on the left-side when someone clicks this button
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

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

export default withStyles(styles)(ButtonAppBar);

Upvotes: 0

Views: 3149

Answers (2)

Common man
Common man

Reputation: 11

You can add multiple Icon in app bar on either side and should mention the action when the icon is clicked,try these steps and get menu or search icon in the app bar.

Source: Add search and menu in app bar

Upvotes: 1

amdev
amdev

Reputation: 7432

you can have a parent component that is class based (which has all states and handlers baked in) then you can have a navigation component and sidebar component (both should be stateless component; based on usage of yours) then by clicking on a button on navigation you should change the corresponding state on the parent component; then you should chain the visibility of your sidebar component based on that state.

actually i just took a moment and created what you need here, just a simple example...
https://codesandbox.io/s/m86ko7vp

for adding animations you can use react-motion or react-spring

Upvotes: 0

Related Questions