Navbar on smaller breakpoints does not close on menu selection.

[extensionteamhq]

Hi. I've integrated the Navbar, which looks fantastic; however, on smaller devices/screens, the collapsable navar container does not close (i.e., re-hide itself) when selecting a navigational link.

Here is the code for the hamburger menu's before-and-after states and the hidden container of navigational links; notice the tag values between the states…

menu button before state (i.e., closed/collapsed menu):
<button class="hamburger" type="button" data-twe-collapse-init data-twe-target="#navbarSupportedContent4" aria-controls="navbarSupportedContent4" aria-expanded="false" aria-label="Toggle Navigation" data-twe-collapse-collapsed>…</button>

menu button after state (i.e., open/expanded menu):
<button class="hamburger" type="button" data-twe-collapse-init data-twe-target="#navbarSupportedContent4" aria-controls="navbarSupportedContent4" aria-expanded="true" aria-label="Toggle Navigation">…</button>

collapsable navbar container before state (i.e., closed/collapsed menu):
<div class="flex-grow basis-[100%] items-center mt-2 lg:mt-0 lg:!flex lg:basis-auto !visible hidden" id="navbarSupportedContent4" data-twe-collapse-item>…</div>

collapsable navbar container after state (i.e., open/expanded menu):
<div class="flex-grow basis-[100%] items-center mt-2 lg:mt-0 lg:!flex lg:basis-auto !visible" id="navbarSupportedContent4" data-twe-collapse-item data-twe-collapse-show>…</div>

Once a link is selected, the expected UX would be a collapsed navbar container so as not to block the viewer's content. The user wouldn't even know if the page/content has changed on smaller screens where the navbar container has many links because it's blocking the page content. Here is an example SvelteKit site using the Navbar: https://main--personal-branded-website.netlify.app/.

Is something missing in the free js functions file, or do I need to somehow handle the event to hide the container?

[iprzybysz]

Hi @extensionteamhq, Navbar uses the Collapse component to show/hide menu items, so you can get an instance of the collapse element and trigger the hide method when the navbar link is clicked. Check out Collapse API documentation for more information.