CODEWITHSUNDEEP
reactjsmaterial-ui
cclloyd
cclloyd

Reputation: 9205

Both right and left aligned icons in AppBar with material-ui next

If I have an AppBar, how can I make it so one group of icons plus the logo is on the left, and another group of icons are on the right of it?

Ex:

AppBar component: 

<AppBar
            className={classNames(classes.appBar, {
                [classes.appBarShift]: open,
                [classes[`appBarShift-left`]]: open,
                [classes[`appBarShift-right`]]: !tools,
            })}
            position='static'
        >
            <Toolbar className={classNames(classes.topBar)}>
                <IconButton
                    color="inherit"
                    aria-label="open drawer"
                    onClick={this.handleDrawerToggle}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon />
                </IconButton>
                <Typography variant="title" color="inherit" noWrap>React App</Typography>
                <IconButton
                    color="inherit"
                    aria-label="open tool drawer"
                    onClick={this.handleToolDrawerToggle}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon />
                </IconButton>
            </Toolbar>
        </AppBar>

Upvotes: 34

Views: 57897

Answers (3)

sanky2020
sanky2020

Reputation: 51

I tried using inline css inside Toolbar component itself, it worked for me; <Toolbar style={{display:'flex', justifyContent:"space-between", width:'100%'}}>

Upvotes: 5

Young
Young

Reputation: 757

I know it's been a while since you asked the question, I would like to provide an alternative solution. Add Box tag (similar to flexbox in CSS) around the components on the left and adjust the flexGrow attribute and it works for me:

import Box from '@material-ui/core/Box';

{/* BEFORE APPBAR*/}

<AppBar>
    <Toolbar>
        <Box display='flex' flexGrow={1}>
            {/* whatever is on the left side */}
        </Box>
        {/* whatever is on the right side */}
    </Toolbar>
</AppBar>

{/* AFTER APPBAR*/}

Upvotes: 29

Luke Peavey
Luke Peavey

Reputation: 3879

You can use flexbox to control the alignment of elements in the toolbar...

One option is to add flex: 1 to the logo element. It will expand to fill the available space in container. All the elements after logo will be aligned to the right.

OR

Use margin-left: auto to align the second group of buttons to the right side of the flex container.

Here is a live example

const styles = {
  // this group of buttons will be aligned to the right side
  toolbarButtons: {
    marginLeft: 'auto',
  },
};

const Demo = ({ classes }) => (
  <AppBar position="static">
    <Toolbar>
      <IconButton color="inherit">
        <MenuIcon />
      </IconButton>
      <Typography variant="title" color="inherit">Title</Typography>
      <div className={classes.toolbarButtons}>
        <IconButton color="inherit"><EditIcon /></IconButton>
        <IconButton color="inherit"><SaveIcon /></IconButton>
        <IconButton color="inherit"><MoreVertIcon /></IconButton>
      </div>
    </Toolbar>
  </AppBar>
);

Upvotes: 67

Related Questions