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;
    }
}