I have a side navigation bar on my webpage that I obtained from a React Bootstrap website, so the class names are already pre-loaded. Instead of using a toggle hamburger icon to expand or collapse the navigation, I want to achieve this functionality based on mouse enter and leave events. Below is my current attempt at implementing this feature. I have created two event handlers for mouse enter and leave, and used inspect element to identify the class names when the navigation is expanded and collapsed.
However, I encountered an issue where assigning these class names dynamically based on mouse position did not work as expected. Can anyone help me with solving this problem?
class App extends Component {
render() {
let sideNav;
const mouseEnter = e => {
sideNav = "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL";
console.log("Mouse entered");
return sideNav;
}
const mouseLeave = e => {
sideNav = "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv";
console.log("mouse left");
return sideNav;
}
return (
<div className="App container">
<div>
<SideNav
onMouseEnter={mouseEnter}
onMouseLeave={mouseLeave}
className={this.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>
</div>
<Routes />
</div>
);
}
}
export default App;