Moving Icon Towards Right in Drawer Navigator Toolbar

Question

I am editing Material UI's drawer navigator example code. I added a notification icon and a checkout icon with the Admin Panel typography within the toolbar.

The checkout icon is towards the right end but for some reason the notification icon is just stuck in the middle. How could I fix this?

Drawer.tsx:

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },

    panelheaderRight:{
        marginRight: 0,
        right: 0,
    },
    toolbar: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
);

export default function PermanentDrawerLeft() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar className="toolbar-class">
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
          <NotificationsIcon className='panelheaderRight'/>
          <ExitToAppIcon className='panelheaderRight'/>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <div className='toolbar'/>
        <Divider />
        <List>
        {[{ text: 'Home', url: '/panel', icon: <HomeIcon/>}].map((item, index) => (
            <Link to={item.url} style={{ textDecoration: 'none' }}>
            <ListItem button key={item.text}>
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.text} />
            </ListItem>
            </Link>
          ))}
        </List>
        <Divider />   
      </Drawer>
    </div>
  );
}

I have also added this css code separately but it doesn't work. Drawer.css:

.panelheaderRight{
    margin-right: 0;
    float: right;
    right: 0;
}
.toolbar-class{
    display:flex;
    justify-content:space-between;
    width: 100%;
    }

Answer 1

Add the following css to the toolbar

.toolbar-class{
display:flex;
justify-content:space-between;
}

Answer 2

That happens because you need an extra wrapper; watch this:

 .toolbar-class { display: flex; align-items:center; justify-content: space-between; background-color: #ddd; padding: 0 1rem; } .toolbar-after { display: flex; align-items: center; } .item:not(:last-child) { margin-right: 15px; }

 <div class="toolbar-class"> <div>Admin panel</div> <div class="toolbar-after"> <p class="item">bell</p> <p class="item">exit</p> </div> </div>

If you don't want an extra wrapper you could use css grid

 .toolbar-class { display: grid; grid-template-columns: 1fr auto auto; align-items:center; background-color: #ddd; padding: 0 1rem; } .item:not(:last-child) { margin-right: 15px; }

 <div class="toolbar-class"> <div>Admin panel</div> <p class="item">bell</p> <p class="item">exit</p> </div>