React.js mobile menu

Question

I can't make the mobile menu appear from the right side, when I press the burger-menu icon nothing happens except it changes to the X icon, everything works perfectly when I manually remove from CSS @media rightSide{right: -100%;} to {right: 0%;} how but can this work from my code when pressing the icon, what I need to change in my code? please help

function Navbar() {
    const[mobileMenu, setMobileMenu] = useState(false);
const onCLickHandler = () => {
    setMobileMenu(!mobileMenu)
}
return(
    <div className="navbar">
        <div className="leftSide">
            <h1>Sneaker<span>Store</span></h1>
        </div>
        <div className="rightSide" id={mobileMenu ? "open" : "rightSide"}>
            <Link to="/">Home</Link>
            <Link to="/store">Store</Link>
            <Link to="/about">About</Link>
            <Link to="/players">Players</Link>
        </div>
        <div className="burger">
            <button onClick={onCLickHandler}>
             {mobileMenu ? <CloseIcon /> : <ReorderIcon />}
            </button>
        </div>
    </div>
)

};

export default Navbar;

---------- CSS -------------

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar{
    display: flex;
    justify-content: space-around;
    min-height: 8vh;
    align-items: center;
    background-color: rgb(124, 28, 28);
}

.rightSide{
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.rightSide a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}

.rightSide a:hover{
    color: black;
    transition: 0.3s ease-out;
}

.leftSide span{
    color: white;
    font-weight: bold;
    font-size: 36px;
}

.burger{
    display: none;
}

.burger button{
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 59px;
}
.burger svg{
    font-size: 35px;
}

@media screen and (max-width: 760px) {
body {
    overflow-x: hidden;
}

.burger {
    display: block;
}

.rightSide{
    position: absolute;
    right: -100%;
    height: 92vh;
    top: 8vh;
    background-color: rgb(124, 28, 28);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transition: 0.4s ease-in;
}

.open{
    right: 0%;
}

Answer 1

You have defined ID attribute in JSX, but there is no styling for that ID