navbar item on select doesn't collapse navbar

[Ahmad-As7]

Describe the bug when selecting a navbar Item on small screens Navbar should collapse but it doesn't.

Project information:

• Flowbite React: 0.1.2

[rluders]

I'm not sure that it is a bug, once the Navbar collapse behaviour isn't given by flowbite-react out of the box, and you need to implement it by yourself.

However, I'm curious to see how it could be implemented, once it seems to be something that needs to be pass to the elements inside the navbar.

[rluders]

See #329

[ogheneovo12]

there's no isCollapsed property for NavBar Collapse, how do we proceed to implement this feature, if it's context based how do consume such context

[BhavyaJain711]

I tried solving this using ref and even fowardRef, but could not get it working. So i used plain JavaScript to solve this.

Gave id to the NavbarToggle Component.

<NavbarToggle id='navbarToggleButton' />

Added onClick property to NavbarCollapse.

<NavbarCollapse onClick={toggleNavbarCollapse} >

The toggleNavbarCollapse implementation.

const toggleNavbarCollapse = () => {
    if (window.innerWidth <= 768) {
      const navbarToggleButton = document.getElementById('navbarToggleButton');
      if (navbarToggleButton) {
        navbarToggleButton.click(); // Simulate a click on NavbarToggle
      }
    }
  };

[findingfocus]

@BhavyaJain711 thank you, Bhavya! I just needed to add the .click() to my button event listener. Thank you so much, this has been a 5 hour fix for me and your comment helped me solve it!

[BhavyaJain711]

@findingfocus I'm glad it helped you. Sorry for late reply. I think this should be included in flowbite-react out of the box, and possibly add a prop to disable this. What do you think? I can't think of a use case when someone won't want it to collapse on select.