Next UI navbar menu won't close after selecting an item

Question

The navbar menu component won't close when the option from the menu was selected.

The menu successfully opens and closes within the menu icon. I tried to to use onPress() but it doesn't seem to help a lot

"use client"
...
export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
return(
...
<NavbarMenu>
        {menuItems.map((item, index) => (
          <NavbarMenuItem key={`${item}-${index}`}>
            <Link
              color="foreground"
              className="w-full"
              href={"#" + item.path}
              size="lg"
              onPress={() => {
                **console.log("closing")**; //Message appears
                **setIsMenuOpen(!isMenuOpen)**; //Menu won't close
              }}
            >
              {item.name}
            </Link>
          </NavbarMenuItem>
        ))}
</NavbarMenu>
)

UPD: when I remove const [isMenuOpen, setIsMenuOpen] = React.useState(false); the menu still opens/closes! It seems that there is a NavbarMenuToggle which has an onChange event which controls menu's behavior

https://nextui.org/docs/components/navbar#navbarmenutoggle-events

How to access this handler?

if you put setIsMenuOpen(false), does it close? – Skar Aug 08 '23 at 11:41 — Skar, Aug 08 '23 at 11:41

score 0 · Answer 1 · answered Aug 08 '23 at 11:47

0

Can you provide more code?

I can give you example how it should look:

import React from 'react';

export function App(props) {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

  return (
     <div>
     <div
         onClick={() => {
         setIsMenuOpen(!isMenuOpen)
         console.log(isMenuOpen);}}
     >PRESS</div>
</div>
  )
}

Maybe you put useState hook at the wrong place?

answered Aug 08 '23 at 11:47

Skar

333
2
11

If this helped you, feel free to accept it as an answer! – Skar Aug 08 '23 at 12:27
There is an ouput in the console (true, false, true...) which means that the variable is changing but I'm afraid there's no effect – Ian2127 Aug 08 '23 at 13:17

score 0 · Answer 2 · answered Aug 08 '23 at 16:23

I edited the file: <Navbar isMenuOpen={isMenuOpen}> navbar opens/closes when the variable is set to true/false

const togleMenu = () => {
setIsMenuOpen(!isMenuOpen);
console.log(isMenuOpen);

};


...

<NavbarMenuToggle
      aria-label={isMenuOpen ? "Close menu" : "Open menu"}
      className="sm:hidden"
      onClick={() => togleMenu()} // clicking on menu icon would change the value
    />

...

<NavbarMenuItem key={`${item}-${index}`}>
            <Link
              color="foreground"
              className="w-full"
              href={"#" + item.path}
              size="lg"
              onPress={() => togleMenu()} // change the value
            >
              {item.name}
            </Link>

Next UI navbar menu won't close after selecting an item

2 Answers2