Creating a Toolbar with both Left and Right Justified Elements with Material UI and React.js

user_10668674 0
Viewed 2179

I'm trying to update the toolbar on the website I'm creating and I'm struggling to create a toolbar that positions things where I want them. I want the name and logo for the site to be on the lefthand side of the toolbar while the login/sign-up buttons are fixed to the righthand side. So far, I've succeeded in getting the logo and title where I want it, but every time I try and add in buttons that are justified to the right margin, they simply position next to the end of the title/logo. Here is my code:

function Header() {

  return (
    <ThemeProvider theme={theme}>
      <AppBar position="static">
        <Toolbar>
          <MenuItem edge="start">
            <Link to="/" style={{textDecoration:"none", color:"black"}}>
              <Typography variant="h3">
                <strong>Test</strong>Value
                <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
              </Typography>
            </Link>
          </MenuItem>
          <MenuItem>
            <Link to={"/"} style={{ textDecoration: 'none' }}>
              <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
            </Link>
            <Link to={"/"} style={{ textDecoration: 'none' }}>
              <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
            </Link>
          </MenuItem>
        </Toolbar>
      </AppBar>
    </ThemeProvider>
  );
}

I've tried using flexGrow as per the examples in the material-ui docs, I've considered using a grid element, but I don't actually want to worry about spacing between the title and the buttons, I simply want to be able to justify elements to both the left and right margins so that their position is consistent regardless of the size of screen they are viewed on, they remain in the same position relative to each margin.

Any help would be greatly appreciated.

material-ui reactjs html javascript
1 Answers
function Header() {

    return (
      <ThemeProvider theme={theme}>
        <AppBar position="static">
          <Toolbar style={{display:"flex", justifyContent:"space-between"}}>
              <div>
            <MenuItem edge="start">
              <Link to="/" style={{textDecoration:"none", color:"black"}}>
                <Typography variant="h3">
                  <strong>Test</strong>Value
                  <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
                </Typography>
              </Link>
            </MenuItem>
            </div>
            <div>
            <MenuItem>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
              </Link>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
              </Link>
            </MenuItem>
            </div>
          </Toolbar>
        </AppBar>
      </ThemeProvider>
    );
  }

Steps:

  1. Wrap both groups (things on the left & things on the right) each into divs.

  2. Add to their containing element (that is, the Toolbar):

display:flex;
justify-content:space-between;
align-items:center; // if you want to center both divs vertically, if they're of different height
  1. Since I assume you want the buttons on the right to be horizontal, add this to the right div (not needed if you've got no block elements in the right group; links are inline by default):
display:flex;
align-items: center //vertical center

Also, make sure Toolbar's spanning its entire intended width, but I think that's the default behavior of MaterialUI's Toolbar.

Responding to a comment

If you want buttons in the right group to have some spacing, applying padding is the simplest solution. You can either apply padding separately to every element (I don't know if you've got only buttons there) to have some fine-grained control.

Or, if you wish to create equal spaces between all elements on the right:

.right-div > * + * {
padding-left: 20px;
padding-top: 20px; // use this one if you're stacking your buttons vertically
}

The above takes every element of the right group EXCLUDING the first one, and applies leftside padding to it, so the only spacing created is between the elements. Of course, you still can override the padding later for specific elements.

Remember you'll have to apply these styles somehow, up there I've assumed you'd add a "right-div" class to the right div.

If you're using MUI's styling solution instead of pure css, it'll look something like:

makeStyles({
    rightDiv:{
        "& > * + *":{
            paddingLeft:"20px"
        }
    }
})

With styled-components:

const RightDiv = styled.div`
& > * + * {
   paddingLeft:"20px"
}
`
user_84679090
Related