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

Question

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:

• Left: (from left to right) 1 menu icon, logo
• Right: (from right to left) 1 menu icon, 1 save icon, 1 edit icon

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> 

Answer 1

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> );