Выровняйте пункты меню вправо с помощью Material-UI

Question

У меня есть меню Material-UI, которое содержит следующее:

<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>

Отображает пункты меню в строке слева от экрана. Мне бы хотелось, чтобы кнопки My Profile и Sign Out появлялись в правой части экрана. Как мне это сделать?

Answer 1

Возможно, есть лучший способ сделать это, но у меня это сработало:

  {
    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 2

Даже если это не имеет отношения к реакции или материалу, вы можете использовать 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>