How to transform: translatex(0%) when click event using react - css

Question

I am new to react and tring to build mobile responsive navbar. in mobile view i want to slide the navbar and I added click event to change transform : translateX(0%) but css doesn't appear to work. here's how my code looks like.
App.js
import Navbar from "./components/Navbar";
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
export default App;
Navbar.jsx
import '../css/navbar.css'
import {useState} from 'react';
function Navbar() {
const [isShowNavLinks, setIsShowNavLinks] = useState(false);
const handleBurgerClick = () => {
setIsShowNavLinks(!isShowNavLinks)
console.log(isShowNavLinks)
}
return (
<nav className="nav">
<h2 className='logo'>LOGO</h2>
<div className="burger" onClick={handleBurgerClick}>
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</div>
<ul className={isShowNavLinks? 'nav-active' : ''}>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
)
}
export default Navbar;
navbar.css
.nav{
background-color: #16003B;
color: #EEEEEE;
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
}
.logo {
padding: 1%;
}
.nav ul {
width: 60vw;
display: flex;
justify-content: space-around;
list-style: none;
}
ul li {
text-decoration: none;
}
.burger {
display: none;
}
.burger>div {
width: 25px;
height: 2px;
background-color:white;
margin: 4px;
}
#media screen and (max-width: 500px) {
body{
overflow-x: hidden;
}
.burger {
display: block;
cursor: pointer;
}
.nav ul{
position:absolute;
top:10vh;
right:0px;
width:50%;
height:90vh;
background-color: #16003B;
flex-direction: column;
transform: translateX(100%);
justify-content: space-evenly;
align-items: center;
transition: 0.5s ease-in;
}
.nav-active {
transform: translateX(0);
}
}
when click on .burger in dom it shows nav-active class but doesn't apply the its css
DOM when click burger

Answer 1

just simply add the !important property on the nav-active class because it will give high priority to this class.
To read out more about it go to this link about important property in css
After adding important property it will work fine for me. Go to checkout
.nav-active{
transform:translateX(0) !important;
}