如何使我的MenuButtonIcon与AppbarMaterialUI的末端对齐？

如何解决如何使我的MenuButtonIcon与AppbarMaterialUI的末端对齐？

我用react和materialui制作了以下导航栏，在样式方面，我使用了一些样式化的组件。 PageTwo是我的第二个页面，其中包含导航栏。根据设备的不同，它是否使用触摸屏，我想显示一个MenuIcon而不是导航栏中的链接

function PageTwo() {
  const classes = useStyles();
  const touchDevice = "ontouchstart" in document.documentElement;
  return (
    <>
      <BG>
        <TheAppBar position="static" id="about">
          <Toolbar>
            <ToolbarLink href="#" color="inherit">
              <Home edge="start" color="inherit" aria-label="home">
                <Home fontSize="large" />
              </Home>
            </ToolbarLink>
            <List
              component="nav"
              aria-labelledby="main navigation"
              className={classes.navDisplayFlex}>
              {touchDevice ? <SideDrawer navLinks={navLinks} /> : (<>
                {navLinks.map(({ title,path }) => (
                  <a href={path} key={title} className={classes.linkText}>
                    <ListItem button>
                      <ListItemText primary={title} />
                    </ListItem>
                  </a>
                ))}
                </>)}
            </List>
          </Toolbar>
        </TheAppBar>
      </BG>
    </>
  );
}

触摸设备的导航栏如下所示：

，其代码如下：

const useStyles = makeStyles((theme) => ({
    MuiDrawer: {
      backgroundColor: "#5d001e",},list: {
      width: 250,linkText: {
      textDecoration: `none`,textTransform: `uppercase`,color: `white`,}))

const TheIconButton = styled(IconButton)`
  color: white !important;
  margin-right: 200px !important;
`

const SideDrawer = ({ navLinks }) => {
    const classes = useStyles();
    const [state,setState] = useState({ right: false })
    const toggleDrawer = (anchor,open) => (event) => {
      if (
        event.type === "keydown" &&
        (event.key === "Tab" || event.key === "Shift")
      ) {
        return
      }
      setState({ [anchor]: open })
    }

    const sideDrawerList = anchor => (
        <div
        className={classes.list}
          role="presentation"
          onClick={toggleDrawer(anchor,false)}
          onKeyDown={toggleDrawer(anchor,false)}>
          <List component="nav">
            {navLinks.map(({ title,path }) => (
              <a href={path} key={title} className={classes.linkText}>
                <ListItem button>
                  <ListItemText primary={title} />
                </ListItem>
              </a>
            ))}
          </List>
        </div>
      );

    return (
        <>
        <React.Fragment>
        <TheIconButton
          edge="end"
          aria-label="menu"
          onClick={toggleDrawer("right",true)}
          classes={classes.menuButton}>
          <Menu />
        </TheIconButton>
        <Drawer anchor="right" open={state.right} onOpen={toggleDrawer("right",true)} onClose={toggleDrawer("right",false)} classes={{paper: classes.MuiDrawer}}>
        {sideDrawerList("right")}
        </Drawer>
      </React.Fragment>
        </>
    )
}

它工作正常，除了我可以更改的所有方法外，其他所有操作都必须更改，因此主页图标旁边的menuIcon（如所示的屏幕截图）位于导航栏的另一端，与末尾对齐。我将许多属性更改为“结束”，但由于某些原因，MenuIcon仍然停留在该位置。有什么想法吗？