使用 material-ui 右对齐菜单选项

Question

I have a material-ui menu which contains the following:

<span>
  <Link to="/issues">
    <Button style={isActive(history, "/issues")}>Issues
    </Button>
  </Link>
  <Link to="/users">
    <Button style={isActive(history, "/users")}>Users
    </Button>
  </Link>
  <Link to="/signup">
    <Button style={isActive(history, "/signup")}>Create User
    </Button>
  </Link>
  <Link to={"/user/" + auth.isAuthenticated().user._id}>
    <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
  </Link>
    <Button color="inherit" onClick={() => {
          auth.signout(() => history.push('/'))
        }}>Sign out</Button>
</span>

It displays the menu items in a line from the left of the screen. I'd like for the My Profile and Sign Out buttons to appear on the right of the screen. How do I do this?

Answer 1

Even if this is not related to react nor material-ui, you can use flex box:

<div style={{ display: 'flex', justifyContent: 'space-between' }}>

  <div>

    <Link to="/issues">
      <Button style={isActive(history, "/issues")}>Issues
      </Button>
    </Link>
    <Link to="/users">
      <Button style={isActive(history, "/users")}>Users
      </Button>
    </Link>
    <Link to="/signup">
      <Button style={isActive(history, "/signup")}>Create User
      </Button>
    </Link>

  </div>

  <div>

    <Link to={"/user/" + auth.isAuthenticated().user._id}>
      <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
    </Link>
    <Button color="inherit" onClick={() => {
      auth.signout(() => history.push('/'))
    }}>Sign out</Button>

  </div>

</div>

Answer 2

There may be a better way to do this but this worked for me:

  {
    auth.isAuthenticated() && (<span>
      <Link to="/issues">
        <Button style={isActive(history, "/issues")}>Issues
        </Button>
      </Link>
      <Link to="/users">
        <Button style={isActive(history, "/users")}>Users
        </Button>
      </Link>
      <Link to="/signup">
        <Button style={isActive(history, "/signup")}>Create User
        </Button>
      </Link>
    </span>)
  }
  {
    auth.isAuthenticated() && (<span  style={{ marginLeft: "auto", marginRight: -12 }}>
      <Link to={"/user/" + auth.isAuthenticated().user._id}>
        <IconButton aria-label="MyProfile" style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>
          <AccountCircle/>
        </IconButton>
      </Link>
      <Button color="inherit" onClick={() => {
          auth.signout(() => history.push('/'))
        }}>Sign Out</Button>
    </span>)
  }

Answer 3

I had some success using a Ref to the button that triggers the menu to calculate it's size and position and then position the menu accordingly. Here's the code:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  },
  menu: {
    position: "absolute"
  }
}));

function getOffset(el) {
  if (!el.current) return { top: 0, left: 0 };
  const rect = el.current.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX + el.current.offsetWidth,
    top: rect.top + window.scrollY + el.current.offsetHeight
  };
}

export default function ButtonAppBar() {
  const classes = useStyles();
  const [menuOpened, setMenuOpened] = React.useState(false);
  let menuButtonRef = React.useRef(null);

  function openMenu() {
    setMenuOpened(true);
  }

  function closeMenu() {
    setMenuOpened(false);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button
            color="inherit"
            onClick={event => openMenu(event)}
            ref={menuButtonRef}
          >
            email@example.com &#9660;
          </Button>
        </Toolbar>
      </AppBar>
      <Menu
        open={menuOpened}
        keepMounted
        onClick={closeMenu}
        id="user-menu"
        anchorReference="anchorPosition"
        anchorPosition={getOffset(menuButtonRef)}
        className={classes.menu}
      >
        <MenuItem onClick={closeMenu}>Sign Out</MenuItem>
        <MenuItem onClick={closeMenu}>More items here...</MenuItem>
      </Menu>
    </div>
  );
}