How to make sidenav mobile link in react js about this situation? - reactjs

Question

I want to make the sidenav mobile to show when clicking.
I tried to use jquery, but don't know how to configure in webpack.
const SignedOutLinks = () => {
return (
<div>
<NavLink to="#" className="sidenav-trigger nav-wrapper" data-target="mobile-links">
<i className="material-icons">menu</i>
</NavLink>
<ul className="right hide-on-med-and-down">
<li className="waves-effect waves-light">
<NavLink to="/signup">Signup</NavLink>
</li>
<li className="waves-effect waves-light">
<NavLink to="/signin">Login</NavLink>
</li>
</ul>
<ul className="sidenav" id="mobile-links">
<li className="waves-effect waves-light">
<NavLink to="/signup">Signup</NavLink>
</li>
<li className="waves-effect waves-light">
<NavLink to="/signin">Login</NavLink>
</li>
</ul>
</div>
);
};

Answer 1

if you want to write it, this is some code i make:
or this link
react:
class Drawer extends React.Component{
constructor(props){
super(props)
this.state = {
open: false,
}
}
handleDrawer(){
let currentState = this.state.open
this.setState({open: !currentState})
}
componentDidMount(){
if (this.state.open = true){
document.addEventListener("keydown", (event) => {
if (event.keyCode === 27){
this.setState({open: false})
}
})
}
}
handleClickOut(){
if(this.state.open === true){
this.setState({open: false})
}
}
render(){
console.log(this.state)
return (
<div>
<div
onClick={this.handleClickOut.bind(this)}
className={this.state.open ? "deactive" : "container"}>
<button onClick={this.handleDrawer.bind(this)}>Click on me to see the
drawer</button>
</div>
<div className={this.state.open ? "active" : "drawer"}>Hellllo i'm a
drawer</div>
</div>
)
}
}
export default Drawer
css:
.drawer {
display: none;
}
.active {
display: show;
position: absolute;
left: 0;
width: 25vw;
height: 100vh;
background-color: #C10E00;
transition: display 0.4s ease-in-out;
text-align: center;
padding: 10px;
}
.container {
position: relative;
text-align: center;
}
.deactive {
position: absolute;
text-align: center;
background-color: #FF5346;
width: 100vw;
height: 100vh;
transition: 0.4s ease-in-out;
opacity: 0.5;
}
button {
width: 300px;
height: 150px;
background-color: #910B00;
color: white;
box-shadow: 2px 5px grey;
margin: 25px;
}
or if you want to get it full coded you can use Material-UI framework