CODEWITHSUNDEEP
cssreactjsmaterial-uicss-grid
Hayk Safaryan
Hayk Safaryan

Reputation: 2046

Material UI, Appbar logo on left, Tabs in the center

I make a react material ui AppBar.

There is a logo and tabs.
The tabs should be in the center of the AppBar and the logo on the left.
But I can't make the logo go to the left.

How can I make it to go the left?

I am using mui's Grid system but if there is better solution doesn't matter.

Here is a live example https://codesandbox.io/embed/delicate-feather-mmf3k

const Header = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  return (
    <nav className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar style={{ alignItems: "center", justifyContent: "center" }}>
          <Grid justify={"center"} alignItems={"center"} container>
            <Grid style={{ justifySelf: "flex-start" }} item>
              <img
                className={classes.logo}
                src={
                  "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
                }
                alt="Logo"
              />
            </Grid>
            <Grid item>
              <Grid container justify={"center"}>
                <Tabs
                  onChange={(e, v) => setValue(v)}
                  value={value}
                  aria-label="Navigation Tabs"
                >
                  <Tab label={"page 1"} />
                  <Tab label={"page 2"} />
                </Tabs>
              </Grid>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    </nav>
  );
};

In this case both the Logo and Tabs are in the center.

I tired to style justifySelf, alignSelf to flex-start on the logo to no avail.
Adding xs to the second Grid item, makes the logo to go to left but the Tabs are not exactly in the center in this case.

Upvotes: 3

Views: 4463

Answers (1)

Hayk Safaryan
Hayk Safaryan

Reputation: 2046

The solution I came up with is to add empty 3rd Grid item.
Justify 'space-between' on the Grid container.
Give xs={1} to the first Grid item, in which is the logo.
Give xs={4} to the tabs Grid item.
Give xs={1} to the third Grid item.

const Header = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  return (
    <nav className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Grid justify={"space-between"} container>
            <Grid xs={1} item>
              <img
                className={classes.logo}
                src={
                  "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
                }
                alt="Logo"
              />
            </Grid>
            <Grid xs={4} item>
              <Grid container justify={"center"}>
                <Tabs
                  onChange={(e, v) => setValue(v)}
                  value={value}
                  aria-label="Navigation Tabs"
                >
                  <Tab label={"page 1"} />
                  <Tab label={"page 2"} />
                </Tabs>
              </Grid>
            </Grid>
            <Grid item xs={1} />
          </Grid>
        </Toolbar>
      </AppBar>
    </nav>
  );
};

Working demo: https://codesandbox.io/s/great-cloud-zwghk

Upvotes: 5

Related Questions