While studying, I encountered a challenge:
In the code below, I need to dynamically set useState(false) based on the screen size.
If the screen is larger than 947px, for instance, it should automatically be changed to true.
The issue arises because setting it to "false" causes my navlist(item:nth-child(3)) to disappear at normal screen width but work fine on smaller screens. Conversely, if set to "true", the navlist functions properly on normal screens but opens by default on small screens, which is quite bothersome...
If anyone knows of a method to address this, please share.
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