I am currently working on creating a react material ui AppBar.
The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side.
However, I have been facing difficulty in making the logo align to the left as intended.
Could someone please provide guidance on how to achieve this alignment?
While I am utilizing mui's Grid system for layout, I am open to exploring alternative solutions if they offer better results.
If you'd like to see a live example of the issue, you can view it here.
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>
);
};
Currently, both the Logo and Tabs are centered within the AppBar.
I have attempted using justifySelf and alignSelf with a value of flex-start on the logo element but it did not work as expected.
Additionally, adding xs to the second Grid item moves the logo to the left, however, it results in the Tabs no longer being perfectly centered.