javascript - How can I center my header buttons and push items to the far right of my toolbar?

Question

Here is my header as is:

My goal is to center the [LEARN MORE, ABOUT, RESOURCES, CONTACT] buttons in the middle of my navbar, and then push the profile icon and switch button to the far right of the page!

Ideally, something similar to this, but with more white space in between Logo / Buttons / Profile Icon+Switch: This is how the toolbar looks like when I srink the screen.

I'm struggling to do so using CSS styles with React and Material UI to accomplish what I want on wide desktop screens. Would greatly appreciate some advice for this one.

Here is my code:

const useStyles = makeStyles((theme) => ({
    appBar: {
        borderBottom: `1px solid ${theme.palette.divider}`,
        "@media (max-width: 950px)": {
            paddingLeft: 0,
        }
    },
    link: {
        margin: theme.spacing(1, 1.5),
        display: 'block',
    },
    toolBar: {
        display: "flex",
        justifyContent: "space-between",
    },
    toolbarTitle: {
        flexGrow: 1,
        fontFamily: 'Track',
        textAlign: "left",
    },
    navLinks: {
        fontWeight: 700,
        size: "18px",
        marginLeft: "38px",
        padding: "0 1rem",
        alignItems: "center",   
        justifyContent: "space-between",
        textAlign: "center" 
    },

    profileAvatar: {
    
    },
}));



     const displayDesktop = () => {
        return <Toolbar>
                    <Link
                        component={NavLink}
                        to="/"
                        underline="none"
                        color="textPrimary"
                    >
                      {Logo}
                    </Link>
                    <div>
                      {getMenuButtons()}
                    </div>
                      {getUserAccount()}
                    <Switch
                        checked={isDarkMode}
                        onChange={toggleDarkMode}
                    />
                </Toolbar>;
      };

    const Logo = (
        <Typography variant="h6" component="h1" className={classes.toolbarTitle} color="inherit">
          Logo
        </Typography>
      );


    const getMenuButtons = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Button
                {...{
                    key: label,
                    color: "inherit",
                    to: href,
                    component: RouterLink,
                    className: classes.navLinks
                }}
                >
                    {label}
                </Button>
          );
        });
      };

    const getUserAccount = () => {
        return <div>
                <IconButton
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
                >
                <AccountCircle />
                </IconButton>
                <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                }}
                open={open}
                onClose={handleClose}
                >
                <MenuItem 
                component={NavLink} to="/profile" 
                onClick={handleClose}
                >
                Profile
                </MenuItem>
                <MenuItem
                component={NavLink} to="/logout" 
                onClick={handleClose}
                >
                Logout
                </MenuItem>
                </Menu>
      </div>    
    }

    return (
        <React.Fragment>
            <CssBaseline />
            <AppBar
                position="static"
                color="default"
                elevation={0}
                className={classes.appBar}
            >
                <Toolbar className={classes.toolbar}>
                    {mobileView ? displayMobile() : displayDesktop()}
                </Toolbar>
            </AppBar>
        </React.Fragment>
    );
}

I've pasted my code for my Logo, Nav links, profile icon and switch functions.

question from:https://stackoverflow.com/questions/65942951/how-can-i-center-my-header-buttons-and-push-items-to-the-far-right-of-my-toolbar

Answer 1

wrap the components in of Toolbar a separate div except the Logo component. then add the flex style in this div

<Toolbar style={{ width: "100%", justifyContent: "space-between" }}>
  <Link to="/" underline="none" color="textPrimary">
    {Logo}
  </Link>
  <div style={{ display: "flex", alignItems: "center" }}>
    {getMenuButtons()}
  </div>
  <div>
    {getUserAccount()}
    <Switch checked={true} />
  </div>
</Toolbar>

the middle div (the wrapper of getMenuButtons) can be used without using flex as it has inline elements (buttons/anchor).