brand icon indicating copy to clipboard operation
brand copied to clipboard

[Suggestion] Improve anchor link support on mobile in `SubdomainNavBar`

Open simurai opened this issue 1 year ago • 3 comments

Problem

Currently you can use an "anchor/deep" link (e.g. /#agenda) with SubdomainNavBar. But since the "hamburger menu" takes up almost the full width/height (we customized it a bit to add a gap), you can't really see that clicking the link changed anything and you have to click on the close "X" button to close the menu.

Steps to reproduce:

  1. Resize browser to mobile
  2. Go to this preview. (Internal)
  3. Click on the "hamburger" menu button
  4. Click on "Agenda" or "Pricing"
  5. Notice that the menu still stays open.

https://github.com/user-attachments/assets/b2e856f8-96f4-48db-8e90-34d7cf9ea5c4

Possible solution

When clicking an "anchor/deep" link, the menu on mobile should close.

Urgency

This came up in this project (internal link). We found a workaround by programmatically trigger a close() on the close "X" button.

https://github.com/user-attachments/assets/7893c57b-63c8-40f6-b699-466639d9e664

So not too urgent, but might still be nice to support "anchor/deep" links with SubdomainNavBar so we don't have to rely on the [aria-controls="menu-navigation"] selector. 🙈

simurai avatar Jul 22 '24 01:07 simurai

Update from planning: Waiting on Site Design to confirm this is the correct solution before triaging further.

rezrah avatar Jul 22 '24 16:07 rezrah

cc. @nsolerieu (Site FR)

rezrah avatar Aug 06 '24 16:08 rezrah

@rezrah just check in with @jesussandreas - we approve @simurai thoughtful fix suggestion

nsolerieu avatar Aug 06 '24 16:08 nsolerieu