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

user_12628486 0
Viewed 1269

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;
    }
}
classname css-modules next.js reactjs javascript
2 Answers

ways are there to solve this problem. You can use material UI. To detect the breakpoint. Like for you case. If want to detect 600px. you can do something like that ---

const themeBreakpoint = theme.breakpoint.down('600px) // themeBreakpoint will be true under 600px.

using this flag you can change state and show what ever you want by using condition rendering.

Second Problem -- you can change any state based on onClick event.

like -- const[clicked,setclicked] = useState(false)

const handleClick = (e) =>{ setclicked(true) } now when you make that clicked flag true, You change you css class based on that flag.

user_104424540

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

user_135847980
Related