[fix] [pfe-navigation 1.x] Links inside pfe-modal inside pfe-navigation don't work

[starryeyez024]

• Standard links inside of modals work fine
• Links inside of the tray slots in nav work fine
• However, the modal on redhat.com used for the language switcher on modal has un-clickable links.
  

To reproduce:

1. Load redhat.com at a 400px screen width
2. Click on Menu
3. Click on English
4. Click any other language link in the modal (they don't work)

If, in web inspector, you drag the <pfe-modal> element out of the navigation, the links work again. The issue seems to be with the nav component.

[kylebuch8]

It looks like the issue boils down to this bit of logic and what makes a link a directLink.

https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-navigation/src/pfe-navigation-item.js#L277

I'm able to tell that this is the case because when I click a language link, a hash ("#") is added to the URL.

[kylebuch8]

@starryeyez024 After meeting with @castastrophe, I think this can be fixed without having to make any changes to pfe-navigation.

Take a look at this codesandbox.
https://codesandbox.io/s/pfe-navigation-mobile-language-kfzzq

The change I made was to move the modal out of the mobile-language slot. I then added some JS to open the modal when "English" is clicked in the mobile view.

I know that closing the modal also closes the mobile menu, which isn't ideal, but at least a different language can be selected now.

Let me know what you think.

[castastrophe]

Related to: #945

[castastrophe]

Rally: #US261998 https://rally1.rallydev.com/#/detail/userstory/399031068408