Блог

Коллапс не работает в панели навигации в адаптивном режиме. Я использую React-Bootstrap и Semantic-UI React (для значка) для добавления панели навигации.

Ниже приведен мой код:

 <Navbar
      collapseOnSelect={true}
      expand="xl"
      className="navbarStyle"
      sticky="top"
    >
      <Navbar.Brand>
        <Image
          src={src}
          as="a"
          size="small"
          href="http://xxxx.com/"
          target="_blank"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav.Link
          as={RouterNavLink}
          to="/"
          exact
          activeClassName="router-link-exact-active"
          style={navStyle}
          eventKey="1"
        >
          Home
        </Nav.Link>
        <Nav.Link
          as={RouterNavLink}
          to="/dashboard"
          exact
          activeClassName="router-link-exact-active"
          style={navStyle}
          eventKey="2"
        >
          Dashboard
        </Nav.Link>
        <Nav.Link
          as={RouterNavLink}
          to="/profile"
          exact
          activeClassName="router-link-exact-active"
          style={navStyle}
          eventKey="3"
        >
          Profile
        </Nav.Link>
        <Nav className="ml-auto">
          <NavDropdown.Item style={dropStyle}>
            {isAuthenticated ? <LogoutButton /> : <LoginButton />}
          </NavDropdown.Item>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  

Может кто-нибудь поправить меня, где я ошибаюсь? Должен ли я установить состояние для collapseOnSelect автоматического сворачивания?

Сворачивание работает с приведенным выше кодом, только если ширина превышает 1000 пикселей, как показано на рисунке. И если ширина, скажем, 900 пикселей, кнопка переключения неактивна, как показано выше