需要使导航链接仅在react挂钩中的较小屏幕设备上单击栏时显示

Question

I'm trying to build a responsive portfolio site in reactjs using hooks but I can't figure out how to manipulate the CSS declaration from js file to only show the vertical nav links when the bar is clicked on

import React,{useState} from 'react'
import './navbar.css'

const Navbar =()=>{
    const [display, setDisplay]  = useState(false);
    return(
        <React.Fragment>
            <div className="navlinks">[recent display on large screen][1]
                <a href="#" >HOME</a>
                <a href="#" >PORTFOLIO</a>
                <a href="#" >BLOGS</a>
                <a href="#" >CONTACT</a>
                <a id="bar" href="#" onClick={()=>alert("hello")}><i className="fas fa-bars"></i></a>
            </div>
/**menu to hide and show**/
            <div className="slideout-menu">
                <a href="#" >HOME</a>
                <a href="#" >PORTFOLIO</a>
                <a href="#" >BLOGS</a>
                <a href="#" >CONTACT</a>
            </div>
        </React.Fragment>
    )
}
export default Navbar;

recent display on small screen

Answer 1

To show the navigation only on responsive devices you should create a media query inside your navbar.css file.

@media screen and (max-width: 767px) {
    .hidden {
      display: none;
    }

    .visible {
      display: block;
    }
}

Also, remove the bar from nonresponsive devices:

@media screen and (min-width: 768px) {
   #bar {
     display: none;
   }
}

Try the following:

import React,{useState} from 'react'
import './navbar.css'

const Navbar =()=>{
    const [display, setDisplay]  = useState(false);

    handleNavbar = e => {
        e.preventDefault();
        display ? setDisplay(true) : setDisplay(false);
    }

    return(
        <React.Fragment>
            <div className="navlinks">
                <a href="#" >HOME</a>
                <a href="#" >PORTFOLIO</a>
                <a href="#" >BLOGS</a>
                <a href="#" >CONTACT</a>
                <a id="bar" href="#" onClick={handleNavbar}><i className="fas fa-bars"></i></a>
            </div>

            <div className=`slideout-menu ${display === false ? "hidden" : "visible"}`>
                <a href="#" >HOME</a>
                <a href="#" >PORTFOLIO</a>
                <a href="#" >BLOGS</a>
                <a href="#" >CONTACT</a>
            </div>
        </React.Fragment>
    )
}
export default Navbar;