帶有語義 UI React 的響應式菜單

Question

使用 Semantic UI React，我在創建響應式導航菜單時遇到了麻煩。

這是正常的桌面視圖：

然后是移動視圖，其中菜單的右上角不在視圖中：

這是導航菜單的代碼：

const MenuNav = props => {
  const logout = () => {
    props.logout();
    return <Redirect to="/" />;
  };

  return (
    <Menu>
      <Container>
        <Menu.Item header>
          <Image
            src={`${process.env.PUBLIC_URL}/assets/images/all-vintage-search-logo.png`}
            href="https://www.allvintagesearch.com"
            alt="All Vintage Search"
            style={{ width: "auto", maxWidth: "300px", overflow: "hidden" }}
          />
        </Menu.Item>
        <Menu.Menu position="right">
          {props.loggedUser.id !== undefined ? (
            <>
              <Menu.Item link>
                <Link to="/favorites">My Favorites</Link>
              </Menu.Item>
              <Menu.Item link>
                <span>
                  <em>Hi {props.loggedUser.firstName} you're logged in!</em>{" "}
                  <Button size="mini" onClick={logout}>
                    logout
                  </Button>
                </span>
              </Menu.Item>
            </>
          ) : (
            <MenuItem>
              <Link to="/login">login</Link>
            </MenuItem>
          )}
        </Menu.Menu>
      </Container>
    </Menu>
  );
};

我試過玩弄圖像，但沒有讓它變得非常小，我不知道如何讓導航菜單顯示響應。 有任何想法嗎？

Answer 1

Semantic-UI 可能是唯一不提供響應式導航欄的現代 UI。 這個 NPM 包： dna-responsive-nav可以解決這個限制。