How do you reset a state on certain breakpoint?

Im trying to set the navMenu to false when i reached sm:(640px above) im wondering if where can i put a code that when sm:(reset NavMenu to false)
export default function Home() {
const [navMenu, setNavMenu] = useState(false);

const handleNavMenu = () => {
setNavMenu(!navMenu)

}

return (
<header className='fixed flex top-0 right py-2 px-2 w-full'>
<nav className='flex w-full justify-between'>
<div className='p-5'>
<h2>RRSDL</h2>
</div>

<div onClick={handleNavMenu} className='sm:hidden p-5 cursor-pointer'>
{navMenu ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
</div>

<ul className={navMenu ?
`sm:flex w-full z-[-1] sm:z-auto sm:justify-end
absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto
left-[100%] sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`

:

`sm:flex w-full z-[-1] sm:z-auto sm:justify-end
absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto
left-0 sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`}>
<li className='p-5'><Link href="/">Home</Link></li>
<li className='p-5'><Link href="/about">About</Link></li>
<li className='p-5'><Link href="/projects">projects</Link></li>
<li className='p-5'><Link href="/contacts">Contact</Link></li>
</ul>
</nav>
</header>
)
}
export default function Home() {
const [navMenu, setNavMenu] = useState(false);

const handleNavMenu = () => {
setNavMenu(!navMenu)

}

return (
<header className='fixed flex top-0 right py-2 px-2 w-full'>
<nav className='flex w-full justify-between'>
<div className='p-5'>
<h2>RRSDL</h2>
</div>

<div onClick={handleNavMenu} className='sm:hidden p-5 cursor-pointer'>
{navMenu ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
</div>

<ul className={navMenu ?
`sm:flex w-full z-[-1] sm:z-auto sm:justify-end
absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto
left-[100%] sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`

:

`sm:flex w-full z-[-1] sm:z-auto sm:justify-end
absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto
left-0 sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`}>
<li className='p-5'><Link href="/">Home</Link></li>
<li className='p-5'><Link href="/about">About</Link></li>
<li className='p-5'><Link href="/projects">projects</Link></li>
<li className='p-5'><Link href="/contacts">Contact</Link></li>
</ul>
</nav>
</header>
)
}
2 Replies
Dev_zxc
Dev_zxc14mo ago
my nav bar is staying open even if its hidden, so when i go to small screen size again its still open i want my navbar to close(because false) when i reached 640px up
Zoë
Zoë14mo ago
I have no idea about Tailwind, but in normal CSS you'd just use a media rule to change the styles rather than relying on a boolean. You know Tailwind better than me and whether it can do it or not
Want results from more Discord servers?
Add your server