Mobile Menu Remains Open After User Interaction

[Ealanisln]

Description: The mobile menu in the Header component is not closing automatically after a user clicks on a menu item. This creates a suboptimal user experience as users have to manually close the menu after each interaction.]

Steps to reproduce: Open the application on a mobile device or use responsive mode in browser dev tools Click on the hamburger icon to open the mobile menu Click on any menu item

Expected behavior: The mobile menu should close automatically after a user clicks on a menu item. Current behavior: The mobile menu remains open after a user clicks on a menu item, requiring manual closure. Possible solution: Modify the navbarToggleHandler function to be called when a user clicks on a menu item. This can be done by adding an onClick event to each menu item that calls navbarToggleHandler. Affected component: Header.tsx

Additional notes:

This issue affects the mobile user experience and should be prioritized for a smoother navigation flow. Consider also adding an overlay that closes the menu when clicked outside the menu area for additional usability.

[Ealanisln]

Fix: To resolve the issue of the mobile menu not closing after user interaction, we need to call the navbarToggleHandler function when menu items are clicked. Here are the key changes:

1. Add onClick={navbarToggleHandler} to the logo Link component:

   <Link href="/" className={navbar-logo block w-full ${sticky ? "py-2" : "py-5"}} onClick={navbarToggleHandler}

   {/ ... /}

2. Add onClick={navbarToggleHandler} to all menu item Links:

   <Link onClick={navbarToggleHandler} scroll={false} href={menuItem.path} className={/ ... /}

   {menuItem.title}

3. For submenu items, modify the onClick handler:

   <Link href={submenuItem.path} key={i} onClick={() => { handleSubmenu(index); navbarToggleHandler(); }} className={/ ... /}

   {submenuItem.title}

4. For the mobile "Sign Out" button, include the navbarToggleHandler:

   <button onClick={() => { signOut({ callbackUrl: "/", redirect: true }); navbarToggleHandler(); }} className="ud-menu-scroll flex py-2 text-base text-dark group-hover:text-primary dark:text-white dark:group-hover:text-primary lg:inline-flex lg:px-0 lg:py-6"

   Sign Out

These changes ensure that the mobile menu will close after any interaction, including clicking on menu items, submenu items, the logo, or the sign-out button.