Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure where I am making a mistake and would appreciate any help. I thought it should have worked.
<div className='action'>
<div className='profile' onClick={this.menuToggle}>
<img src={Avatar} alt="Avatar" />
</div>
<div className={`menuDropdown ${active ? "active" : ""}`}>
<ul>
<li><a href='#' />View Profile</li>
<li><a href='#' />Logout</li>
</ul>
</div>
</div>
class NavBarClient extends Component {
constructor() {
super();
this.state = {
active: false
};
}
// Function to toggle the menu
menuToggle = () => {
this.setState({ active: !this.state.active });
}
render() {
const { active } = this.state;
.menuDropdown{
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background-color: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0,0,0,0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
&.active{
top:80px;
visibility: visible;
opacity: 1;
}
}