bug: Submenu items are not accessible on mobile

[sssoz]

Bug Report

Describe the bug

Tapping on any menu item on mobile to reveal its subitems leads users to the top-level page and doesn’t give them the opportunity to browse or access any secondary pages.

To Reproduce

1. On mobile, go to https://womencodingcommunity.com/
2. Tap the hamburger menu
3. Tap any menus that contain submenus (Mentorship, About Us)
   • Outlier here: Programmes works fine and effectively shows the submenu items since there’s no top-level link on the menu title (Programmes)
4. See that they'll lead to the top-level page, and that the submenus —containing, for example, Mentors / Resources / Code of Conduct / FAQ— appear quickly and can’t be accessed.

Expected behavior

User should tap on top-level menu items without navigating to the page. User should be able to access sub-menu items by tapping instead.

Screenshots

Smartphone (please complete the following information):

• Device: Google Pixel 6
• OS: Android 14
• Browser: Chrome 124.0.6367.82

Reproducibility

• The bug is reproducible consistently.
• The bug is sporadic or occurs randomly.

Impact

• The bug affects critical functionality.
• The bug affects minor functionality.
• The bug is a cosmetic issue.

Additional context

Add any other context about the problem here.

Related Issues/PRs

• Possibly occurred after changing from menu items being shown on hover instead of clicking/tapping in Nav Menu Enhancement #107
• Could be paired with the bug: submenu links are not accessible from keyboard #139 a11y fix

Proposed Solution (optional)

• Only allow showing menu items on hover on desktop
• Not using top-level menu item as a link and only include them as a submenu item (as with Programmes)

[lilyndk]

Closing issue as a duplicate of #115