Fix: ensure DonorDashboard mobile navigation opens as expected

[JoshuaHungDinh]

Resolves: GIVE-1288

Description

This PR resolves an issue with the mobile navigation in the DonorDashboard where the hamburger menu was unresponsive, preventing donors from accessing other sections of the dashboard on mobile devices.

The problem stemmed from a handleClick function inside a useEffect hook, which unintentionally caused the menu to close immediately upon interaction, preventing it from staying open when clicked.

Affects

The DonorDashboard in mobile view.

Visuals

Screen.Recording.2024-10-03.at.8.59.04.AM.mov

Testing Instructions

• Open the donor dashboard in mobile view.
• Click the hamburger menu/icon to open the navigation items.
• Click outside the navigation links to verify the menu closes.
• Navigate to a new page to ensure the menu works properly.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[pauloiankoski]

@JoshuaHungDinh This solution indeed works as expected, opening the menu. However, I’d like to propose a different approach that would allow us to benefit from auto-closing the menu when clicking on one of the options.

The steps would be:

• Rename contentRef to toggleRef throughout the code.
• Move the existing ref attribute to the .give-donor-dashboard-mobile-menu__toggle element.

By doing this, everything should work as expected without needing to use stopPropagation.

[JoshuaHungDinh]

@JoshuaHungDinh This solution indeed works as expected, opening the menu. However, I’d like to propose a different approach that would allow us to benefit from auto-closing the menu when clicking on one of the options.

The steps would be:

• Rename contentRef to toggleRef throughout the code.
• Move the existing ref attribute to the .give-donor-dashboard-mobile-menu__toggle element.

By doing this, everything should work as expected without needing to use stopPropagation.

@pauloiankoski Resolved: 1f41cb0

[rickalday]

Passed manual QA tests.