fix(#1368,#1792,#1772,#1569): fixing link active when router change

[vanessatran-ddi]

Scope:

1. Fixing App Header: not updating current selection when using routerLink #1772
2. Fixing App Header: Selected item on mobile is not highlighted #1792
3. Fixing [Bug]: AppHeader Menu isn't active #1386
4. Fixing Side menu not showing current page correctly when there is sub item #1569

What are changed:

• AppHeader active link on mobile and tablet, now has the blue background color and white text color like Figma described
• AppHeaderMenu active link now has the blue background color and white text color like Figma above.
• Move as much as possible CSS of GoAAppHeader and GoAAppHeaderMenu under components.css to component itself, using ::slottted
• Add getMatchedLink to make sure if AppHeader and AppHeaderMenu links have the same weight, then no menu should be active. Change the logic to make sure the highest weight item will be active. Add tests.
• When URL is changed (routerLink) on single page applications, the link class current should be updated. The current link should be correct.
• AppHeaderMenu should be closed if router is changed.
• Tab href is fixed in order to work with Angular.

Demo link: https://vanessatran-ddi.github.io/ui-components/#/

Video demo:

app-header-active.mov

app-header-active-web-docs.mov

[ArakTaiRoth]

Finished testing, here are my issues I found

• Doesn't work if you use routerLink instead of href
• Doesn't work if you use a click event instead of href
• Doesn't work with AppHeaderMenu (as in, if you select an item inside an AppHeaderMenu, the top level item doesn't show as selected)

[vanessatran-ddi]

Finished testing, here are my issues I found

• Doesn't work if you use routerLink instead of href
• Doesn't work if you use a click event instead of href
• Doesn't work with AppHeaderMenu (as in, if you select an item inside an AppHeaderMenu, the top level item doesn't show as selected)

Hi @ArakTaiRoth , The second one, as we discussed in Slack, will not be able to be solved using the current logic to detect the URL changed.

[lizhuomeng71]

issue #1386 is verified fixed on react and angular, tested for both href and routerlink, also tested /start-up and /start-up/overview combination. works as expected

[lizhuomeng71]

for react,

when there is only one item in GoAAppHeaderMenu. the GoAAppHeaderMenu is showing always active. even when other GoAAppHeader Item is clicked. Had an huddle and demoed the STR with Vanessa

[lizhuomeng71]

issue is verified on react and angular for chrome, firefox and edge

[lizhuomeng71]

issue is verified on react and angular for chrome, firefox and edge

[tzuge]

🎉 This PR is included in version 1.17.0-alpha.56 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.17.0-alpha.28 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.21.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.21.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀