[BUG] Navbar Toggler not working in Nav Header if bundled

[pizzandlove]

Describe the bug Navbar Toggler doesn't work in mobile when bundled. As long as you run the code in developement mode, the Navbar Toggler works fine. If you build the project, be it react-create-app, or vite, the button stops working.

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://stackblitz.com/edit/vitejs-vite-xamznk?file=README.md'
2. In terminal execute: npm run build npm run preview
3. Reduce the width of the window until the Navbar Toggler button is visible.
4. Try to click on it and nothing happens.

The stackblitz project was forked from the template referenced in the README of design-react-kit.

Expected behavior The Navbar Toggler should work both in developement and in production.

[Virtute90]

The problem lies in the onClick function of the HeaderToggler component which should point to a useState.

function App() {
  const [collapsed, setCollapsed] = useState(false);

  const toggleNavbar = () => setCollapsed(!collapsed);

  return (
    <>
      <Headers>
        <div className="it-nav-wrapper">
          <Header type="navbar">
            <HeaderContent expand="lg" megamenu>
              <HeaderToggler
                aria-controls="nav1"
                aria-expanded="false"
                aria-label="Mostra/Nascondi la navigazione"
                data-bs-toggle="navbarcollapsible"
                data-bs-target="#nav1"
                onClick={toggleNavbar}
              >
                <Icon icon="it-burger" />
              </HeaderToggler>
              <Collapse id="nav1" header navbar isOpen={collapsed}>
                <div className="menu-wrapper">
                  <Nav navbar>
                    <Dropdown inNavbar tag="li">
                      <DropdownToggle caret inNavbar>
                        <span>Menu Dropdown</span>
                      </DropdownToggle>
                      <DropdownMenu>
                        <LinkList>
                          <LinkListItem href="#" inDropdown>
                            <span>Link list 1</span>
                          </LinkListItem>
                          <LinkListItem href="#" inDropdown>
                            <span>Link list 2</span>
                          </LinkListItem>
                          <LinkListItem href="#" inDropdown>
                            <span>Link list 3</span>
                          </LinkListItem>
                          <LinkListItem href="#" inDropdown>
                            <span>Link list 4</span>
                          </LinkListItem>
                        </LinkList>
                      </DropdownMenu>
                    </Dropdown>
                  </Nav>
                </div>
              </Collapse>
            </HeaderContent>
          </Header>
        </div>
      </Headers>
    </>
  );
}

Try like this.

ps: Where did you find this example in the documentation?

[pizzandlove]

Thank you @Virtute90. I have missed that part and was misleaded by the HeaderToggler working in developement mode without a useState for onClick.

The example I have provided was written by me, because the source code of the components in the Storybook is messed up, but I see that you've already addressed that in #1053