Чтобы развернуть навигацию, а не нажать на триггер? - PullRequest
Новая
       5

Чтобы развернуть навигацию, а не нажать на триггер?

0 голосов
/ 11 февраля 2019

У меня есть навигационная панель сбоку моей страницы, я получил код с веб-сайта.В настоящее время наверху есть кнопка, которая, когда пользователь нажимает на нее, расширяется.Однако я бы хотел, чтобы он расширялся, когда пользователь наводит на него курсор.И не расширяется, когда мышь покидает его.Но, это закодировано с использованием response-bootstrap, поэтому я не уверен, как я могу редактировать это.Есть идеи?

NavBar: 

<div className="App container">
      <SideNav
        onSelect={(selected) => {
            // Add your code here
        }}
      >
        <SideNav.Toggle  />
        <SideNav.Nav  defaultSelected="home">
            <NavItem eventKey="home">
                <NavIcon>
                    <Link to="/"><img src={Dash}/></Link>
                </NavIcon>
                <NavText>
                    <Link to="/">Dashboard</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="sites">
                <NavIcon>
                  <Link to="/sites"><img src={Site} /></Link>
                </NavIcon>
                <NavText>
                    <Link to="/sites">Sites</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="tours">
              <NavIcon>
                <Link to="/tours"><img src={Tour}/></Link>
              </NavIcon>
              <NavText>
                  <Link to="/tours">Tours</Link>
              </NavText>
            </NavItem>
            <NavItem eventKey="media">
                <NavIcon>
                  <Link to="/media"><img src={Media}/> </Link>
                </NavIcon>
                <NavText>
                    <Link to="/media">Media</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="newSite">
                <NavIcon>
                    <Link to="/newSite/details"><img src={NewSite} /></Link>
                </NavIcon>
                <NavText>
                    <Link to="/newSite/details">Add new Site</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="profile">
                <NavIcon>
                    <Link to="/profile"><img src={Profile} /></Link>
                </NavIcon>
                <NavText>
                    <Link to="/profile">Profile</Link>
                </NavText>
            </NavItem>

        </SideNav.Nav>
      </SideNav>
      <Routes />
      </div>

1 Ответ

0 голосов
/ 11 февраля 2019

Лично я думаю, что это очень плохой, недоступный дизайн UX, но если вы хотите пойти дальше и сделать это, вам нужно реализовать обработчик onMouseEnter, например: 

  handleOnMouseEnter(path) {
    const { history } = this.props;

    console.log("handleOnMouseEnter: ", path);

    history.push(path);
  }

Чтобы получить доступ к объекту history внутри реквизита, вам нужно обернуть ваш компонент в withRouter HOC, примерно так: 

const WrappedApp = withRouter(App);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Router>
    <WrappedApp />
  </Router>,
  rootElement
);

Тогда ваш NavItem будет выглядеть примерно так:

    <NavItem
      eventKey="sites"
      onMouseEnter={() => this.handleOnMouseEnter("/sites")}
    >
      <NavText>
        <Link to="/sites">Sites</Link>
      </NavText>
    </NavItem>

См. этот CodeSandbox для работающей реализации.

...