[Masthead]: Add a logic that highlights the current and parent menu items within the Masthead dropdown + Mega Menu based on the URL

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM

https://www.ibm.com/standards/carbon/

Apache License 2.0

264 stars 157 forks source link

[Masthead]: Add a logic that highlights the current and parent menu items within the Masthead dropdown + Mega Menu based on the URL #6638

Closed proeung closed 2 years ago

proeung commented 3 years ago

The problem

The current dds-masthead-container component does not have a logic in place that highlights the current and parent menu items according to the current URL of the page.
There's a style in place for the active state, however, this attribute should be updated/applied in the shadow Dom where we're rendering the menu items.
As part of the Unified Cloud Masthead + Megamenu project, we'd like to ensure that users understand where within the page that are on especially when you're navigating 2 to 3 levels down.

Example

IBM_Cloud_cost_estimator___IBM

Purposed solution

Add a script that executes and compares the href of each menu link to the current page URL starting after the domain name and assigns the correct active styling to the appropriate menu item.
I know that this request might be a bit tricky, so I'm open to suggestions.

jeffchew commented 3 years ago

Note from @proeung that this may be a launch blocker but will check on her end.

jeffchew commented 3 years ago

Will add to engineering huddle to discuss further on tech approach.

jeffchew commented 3 years ago

After discussing with the team, we are thinking that the logic could be to fetch the location.path, then look for that in the translationAPI data for the page. Once found, it will find the parent titleEnglish field which would be used to highlight the parent. This seems like it would be something done generally for global masthead.

With this, the attribute selected-menu-item may not be necessary. We can decide to either deactivate, or keep it and allow as an override.

jeffchew commented 3 years ago

@RobertaJHahn should this remain an epic? Seems like primarily dev work here.

proeung commented 3 years ago

@jeffchew Sounds like a great solution and thanks for the update!

shixiedesign commented 3 years ago

Sounds good, we just need a functional spec issue in addition. No visual changes.

RobertaJHahn commented 3 years ago

@jeffchew Regarding whether this work should continue to be managed in an epic...Looks like we will have func specs, dev and prod QA work to manage? Correct? If this is the case, then I would keep it as an epic. Let me know. Thanks.

huntermacd commented 3 years ago

Making good progress on this work. A couple issues came up I'd like to bring attention to.

Certain links in the Cloud version of the masthead, like https://www.ibm.com/cloud/ai are present both under Products and Solutions. Unlike links in the non-Cloud version of the masthead, which have identifiers, like ?lnk=hpmps_buai, Cloud masthead links have no identifier that can be used to distinguish under which heading they should be highlighted. How should we distinguish between the two?

Screen Shot 2021-08-19 at 1 03 35 PM

Certain links in the non-Cloud version of the masthead, like https://www.ibm.com/docs/en?lnk=hpmls_budc, are used both for the link with icon that heads the section as well as an underlying link. How might we decide which to highlight?

Screen Shot 2021-08-19 at 1 00 40 PM

proeung commented 3 years ago

@RobertaJHahn I'm moving this issue from v1.24.0 to v1.25.0 as I don't think we'll be able to push up a solution and test the work in time for the 08/27 code freeze for the v1.24.0 release.

shixiedesign commented 3 years ago

Summarizing the decisions in a bit more visual format. Notice the difference between desktop & mobile usage of selected state styles:

RobertaJHahn commented 2 years ago

All linked issues are closed.