Kevin Powell - Community•9mo ago

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•9mo 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ë•9mo 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

Gaming

Programming

How do you reset a state on certain breakpoint?