Блог

Вот мой заголовок как есть:

Моя цель — расположить кнопки [ПОДРОБНЕЕ, О, РЕСУРСАХ, КОНТАКТЫ] в центре панели навигации, а затем нажать значок профиля и кнопку переключения в крайнем правом углу страницы!

В идеале, что-то похожее на это, но с большим количеством пробелов между логотипом / кнопками / значком профиля переключателем: так выглядит панель инструментов, когда я переключаю экран.

Я изо всех сил пытаюсь сделать это, используя стили CSS с React и Material UI, чтобы выполнить то, что я хочу, на широких экранах рабочего стола. Был бы очень признателен за некоторые советы по этому вопросу.

Вот мой код:

 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>
    );
}
 

Я вставил свой код для своего логотипа, навигационных ссылок, значка профиля и функций переключения.

оберните компоненты в панели инструментов отдельно div , кроме Logo компонента. затем добавьте стиль flex в этот 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>
 

середину div (оболочку getMenuButtons ) можно использовать без использования flex, поскольку она имеет встроенные элементы (кнопки / привязки).