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