How to set a const value (true or false) according to window size?-CodePudding

In my studies I came across this problem:

In this code below, I need to set useState(false) according to the screen size.

If it is larger than 947px, for example, it's automatically changed to true.

Because if I change this to "false", my navlist(item:nth-child(3)) doesn't show up on the normal screen width, but it works normally on small screen. And if I change it to "true", my navlist works normally on normal screens, but if I change to a small screen, my navlist starts open, and this is really annoying me...

If there is any method of doing something like that, please let me know.

import Image from "next/image";
import styles from "../styles/Navbar.module.css";
import React, { useState } from 'react';



const Navbar = () => {

    const [openMenu, setOpenMenu] = useState(false);

    
    return (
        <div className={styles.container}>
            <div className={styles.item} onClick={() => setOpenMenu(!openMenu)}>
                <div className={styles.line} style={{ transform: openMenu ? "rotate(-765deg) translate(-8px, 8px)" : "rotate(0) translateX(0)" }}></div>
                <div className={styles.line} style={{ opacity: openMenu ? "0" : "1" }}></div>
                <div className={styles.line} style={{ transform: openMenu ? "rotate(-855deg) translate(5px, 7px)" : "rotate(0) translateX(0)" }}></div>
            </div>
            <div className={styles.item}>
                
                <div className={styles.call}>
                    <Image src="/img/telephone.png" alt="Telephone" width="32px" height="32px" />
                </div>
                <div className={styles.call}>
                    <div className={styles.text}>ORDER NOW!</div>
                    <div className={styles.text}>012 345 6789</div>
                </div>
            </div>
            <div className={styles.item}>
                <ul className={styles.list} style={{ transform: openMenu ? " translateX(0)" : "translateX(-100%)" }}>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Homepage</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Products</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Menu</a></li>
                    <li className={styles.listItem}><a href="#">
                        <Image src="/img/logo.png" alt="Logo" width="160px" height="69px" /></a>
                    </li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Events</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Blog</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Contact</a></li>
                </ul>
            </div>
            <div className={styles.item}>
                <div className={styles.cart}>
                    <Image src="/img/cart.png" alt="Logo" width="30px" height="30px" />
                    <div className={styles.counter}>2</div>
                </div>
            </div>
        </div>
    )
}

export default Navbar

CodePudding user response：

Here is a hook function where you can detect the screen width, this will also handle screen resizes:

function getWindowDimensions(): { windowWidth: number; windowHeight: number } {
    if (typeof window === 'undefined') {
        const windowWidth = 0;
        const windowHeight = 0;
        return { windowWidth, windowHeight };
    }

    const { innerWidth: windowWidth, innerHeight: windowHeight } = window;

    return {
        windowWidth,
        windowHeight,
    };
}

function UseWindowDimensions(): {
    windowWidth: number;
    windowHeight: number;
} {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

    useEffect(() => {
        function handleResize(): void {
            setWindowDimensions(getWindowDimensions());
        }

        window.addEventListener('resize', handleResize);

        return (): void => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
}

Usage as follows:

const { windowWidth } = UseWindowDimensions();

You can then control your state boolean within a useEffect that is observing the 'windowWidth' value.

 useEffect(()=> {
    windowWidth > 947 ? setOpenMenu(true) : setOpenMenu(false)
 },[windowWidth])