移动菜单效果扩展到桌面视图

Question

问题：

如何让移动菜单的导航不影响桌面？ 当我单击汉堡按钮以隐藏菜单并将浏览器大小调整为桌面时，导航消失。 我想知道我做错了什么，以便更好地理解我的错误。

动图视频

完整代码如下：

class Navigation extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
          show: false
        }
        this.toggleShow = this.toggleShow.bind(this)
        this.hide = this.hide.bind(this)
      }

      toggleShow() {
        this.setState({
          show: !this.state.show
        });
      }

      hide(e) {
        if (e && e.relatedTarget) {
            e.relatedTarget.click();
        }
    }


    render() {
      return (
          <Router>
              <div className="FlexContainer NavbarContainer">
                  <div className="mobilecontainer LeftNav">
                      <h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
                      <div 
                      className="hamburger inlinev"  
                      onClick={this.toggleShow}  
                      onBlur={this.hide}>
                          <img alt="menubtn" src={hamburger}></img>
                      </div>
                  </div>

                  {
                        this.state.show &&
                    ( 
                        <ul className="NavBar">
                            <Dropdown/>    
                            <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                            <li className="RightNav"><Link to="/">About Us</Link></li>
                            <li className="RightNav"><Link to="/">Contact Us</Link></li>
                            <li className="RightNav"><Link to="/">Sign Up</Link></li>
                            <li className="RightNav"><Link to="/">Login</Link></li>
                        </ul>
                    )
                  }
               </div>
         </Router>
      );
    }
}
  export default Navigation;

SCSS代码：

.NavbarContainer {
    border-bottom: 1px #E7E7E7 solid;
    .mobilecontainer {
        margin: 2.1em;
        .hamburger {
            display: inline;
            img {
                width: 35px;
                cursor: pointer;
                float: right;
            }
        }
    }

    .NavBar {
        // display: none;
        .RightNav {
            text-align: center;
            padding: 27px 0;
            border-right: none;
            border-left: none;
            border-bottom: 1px #E7E7E7 solid;
            font-size: large;
            a {
                color: #0E0E0E;
            }
        }

    }


    .Dropdown {
        float: none;
        overflow: hidden;

        .Dropdown-Content {
            position: relative;
            background-color: white;
            z-index: 2;
            min-width: 217px;       
            a {
                float: none;
                display: block;
                text-align: center;
                border: 1px #E7E7E7 solid;
                padding: 15px 22px;
            }
        }
    }

    .dropdown-content {
        a {
            &:hover {
                 background-color:  #ddd
            }
        }
    }

    .dropdown {
        &:hover {
            .dropdown-content {
                display: block;
            }
        }
    }

    .LeftNav {
        flex-grow: 8.2;
        font-weight: bold;
        font-size: large;
        display: flex;
        align-items: center;
    }

    @media (min-width: 55em) {
        display: flex;
        flex-direction: row;
        align-items: center;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 60px;
        background-color: #ffffff;
        padding: 3em;
        .LeftNav {
            flex-grow: 0.2;
            font-weight: bold;
            font-size: large;
        }

        .mobilecontainer {
            margin: 0;
            .hamburger {
                img {
                    display: none
                }
            }
        }

        .NavBar {
            display: flex;
            .RightNav {
                padding-left: 15px;
                padding-right: 15px;
                text-align: initial;
                border-bottom: none;
                font-size: large;
            }

            .FarRight {
                flex-grow: 1;
            }
        }

        .Dropdown {
            float: left;
            overflow: hidden;
            .Dropdown-Content {
                position: absolute;
                top: 96px;
                background-color: white;
                z-index: 2;
                min-width: 217px;       
                a {
                    text-align: left;
                    padding: 15px 22px;
                }
            }
        }
    }
}

这是我用于这个项目的 SCSS 代码。

Answer 1

this.state.show只负责切换移动菜单。当show ===false react 忽略在移动设备或桌面上渲染导航栏。你不能用这种方式来实现你的目标。我的建议是考虑使用react-bootstrap Navbar或reactstrap导航栏
我希望这能帮到您。