Best way to change className in Next.js when a button is clicked, with CSS Modules?

Question

I am creating a basic nav bar and I want to change it based on screen size. Once it hits 600px i'd like to hide the links and display a clickable nav button that will expand those options.

After console logging my list Elements I found that the className was given this 'Nav_floatLeft__H1YZ8'. So based on that finding, my code is as follows. However, my navigation does not display any changes when clicking the button.

I'm sure React has a better way of handling this situation, but I'm fairly new to it. Should I be using some kind of state/effect hook?

Nav:

const openCloseMenu = () => {
    console.log(document.getElementsByClassName(styles.floatLeft).className);
    let elements = document.getElementsByClassName(styles.floatLeft);

    if (elements.className === "Nav_floatLeft__H1YZ8"){
        alert("Changed to: Menu Bar Expanded");
        elements.className = styles.menuBarExpanded;
    }
    else {
        alert("Changed Back to: Float Left")
        elements.className = styles.floatLeft;
    }
}

return (
    <div className={styles.topNav}>
        
        <nav>
            <ul className={styles.inlineListItem}>
            
                <li className={styles.floatLeft}>
                    <Link href="/">
                        <a>Home</a>
                    </Link>
                </li>

                <li className={styles.floatLeft}>
                    <Link href="/search">
                        <a>Search</a>
                    </Link>
                </li>

                <li className={styles.menuBar}>
                    <button onClick={openCloseMenu}>Expand Nav</button>
                </li>

            </ul>
            
        </nav>
    </div>
)

CSS:

.inlineListItem{
    display: inline;
    list-style: none;
}

.floatLeft{
    float: left;
    margin: 1rem;
    padding-left: 1rem;
    text-align: center;
    color: white;
}

.floatRight{
    display: inline;
    float: right;
    color: white;
    margin: 1rem;
    padding-right: 2rem;
}

.menuBar{
    display: none;
    float: left;
    margin: 1rem;
    padding-left: 1rem;
    text-align: center;
    color: white;
}

.menuBarExpanded{
    display: block;
}

@media screen and (max-width: 600px) {
    .menuBar{
        display: block;
    }
    .floatLeft{
        display: none;
    }
    .floatRight{
        display: none;
    }
}

Answer 1

You could implement an useState hook:

import { useState } from "react";

const YourComponent = () => {

const [cliked, setClicked] = useState(false);

return (
    <YourNavbar className={clicked ? "display" : "hide"} />
    ....
    <button onClick={() => setClicked(current => !current)}>Expand Nav</button>
    ....
    )
}

And on css, you can establish the class display with the actual attributes of the navbar, and a hidden (display: none)

This will check if the navbar button has been clicked (set to true), and on the conditional class, if its true, then it will display the navbar through the "display" class, if the button is clicked again, clicked will be false and the class for the navbar will be "hidden".

Remember to delegate this classnames to the item only when the navbar is below 600px with @media