Erstellen eines Hover-Effektmenüs in React - html, css, reactjs

Ich muss ein Slide-Out-Menü erstellen, etwa das auf den folgenden Bildern:

EDIT: Ich habe versucht, CSS zu verwenden, aber meine Seitenleiste wird nicht angezeigt. Dies ist mein CSS-Code:

.SideBar{
position: absolute;
left: -80px;
transition: 0.4s;
width: 80px;
font-size: 15px;
color: white;
transition: 0.3s

} .SideBar:hover{ left: 0; }

Antworten:

Verwenden Sie OnHover und ändern Sie dann den Status, wenn sich der Hover im Hover befindet. Nach dem Statuswechsel können Sie die Bedingung verwenden.

etwas wie das:

render() {
return (
<div>(this.state.isHovered) ? (<a>openedmenu</a>) :(<a onHover={this.hover.bind(this)}>closed menu</a>)</div>
)
}


hover() {
this.setState({isHovered:true})
}

und dann können Sie selbst experimentieren