I’m trying to toggle an active class on my navbar menu in a React component using CSS Modules, but the class isn’t being applied as expected. The menu should slide in when I click on a hamburger button, but the active class does not seem to work.

Here is the setup:

import { useState } from "react";
import styles from './Navbar.module.css';

export function Navbar() {
    const [isActive, setIsActive] = useState(false);

    const toggleActiveClass = () => {
        setIsActive(!isActive);
        console.log('isActive:', isActive); // Check if the state is toggling
        console.log('styles:', styles); // Check if the styles are correctly imported
    };

    const removeActive = () => {
        setIsActive(false);
    };

    return (
        <div className="App">
            <header className="App-header">
                <nav className={styles.navbar}>
                    <a href='#home' className={styles.logo}>Dev. </a>
                    <ul className={`${styles.navMenu} ${isActive ? styles.active : ''}`}>
                        <li onClick={removeActive}>
                            <a href='#home' className={styles.navLink}>Home</a>
                        </li>
                        <li onClick={removeActive}>
                            <a href='#catalog' className={styles.navLink}>Catalog</a>
                        </li>
                        <li onClick={removeActive}>
                            <a href='#all-products' className={styles.navLink}>All products</a>
                        </li>
                        <li onClick={removeActive}>
                            <a href='#contact' className={styles.navLink}>Contact</a>
                        </li>
                    </ul>
                    <div
                        className={`${styles.hamburger} ${isActive ? styles.active : ''}`}
                        onClick={toggleActiveClass}
                    >
                        <span className={styles.bar}></span>
                        <span className={styles.bar}></span>
                        <span className={styles.bar}></span>
                    </div>
                </nav>
            </header>
        </div>
    );
}

Here is the css

.navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        padding: 10px;
    }
    
    .logo {
        color: white;
        text-decoration: none;
    }
    
    .navMenu {
        list-style: none;
        display: flex;
        flex-direction: row;
        gap: 20px;
        position: absolute;
        top: 70px;
        left: -100%;
        transition: 0.7s ease-in-out;
        background-color: aliceblue;
        width: 100%;
        padding: 10px;
    }
    
    .active {
        left: 0; /* Make sure this is applied when active */
    }
    
    .navLink {
        text-decoration: none;
        color: black;
    }
    
    .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
    }
    
    .bar {
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 4px 0;
        transition: 0.4s;
    }
    
    @media (max-width: 768px) {
        .hamburger {
            display: flex;
        }
    
        .navMenu {
            flex-direction: column;
            left: -100%; /* Initially off-screen */
            position: absolute;
        }
    
        .navMenu.active {
            left: 0; /* Slide in when active */
        }
    }

What I’ve Tried:

• I checked the state using console.log(isActive) and verified that the
  state is toggling correctly.
• I checked the imported CSS classes
  using console.log(styles) and confirmed that the active class is
  imported.
• I ensured that the active class is being applied
  conditionally in JSX with ${isActive ? styles.active : ”}.

Expected Behavior:
When I click on the hamburger menu, the active class should be applied to the navMenu, which should change the left property from -100% to 0 and make the menu slide in.

Current Behavior:
Even though the state toggles and the active class should be applied, the menu does not slide in as expected. It seems like the active class is not getting applied to the navMenu.

Questions:

1. Is there anything wrong with how I’m applying the classes using CSS
   Modules in React?
2. Could the issue be with how CSS modules work in this particular setup, or is it
   something to do with how I handle state?