chore(docs): Updated the Navigation demos to use the masthead instead of the page header

[tlabaj]

What: Closes #9015

[patternfly-build]

Preview: https://patternfly-react-pr-9223.surge.sh

A11y report: https://patternfly-react-pr-9223-a11y.surge.sh

[thatblindgeye]

For the Horizontal Nav demo, the breakpoints aren't kicking in at the right time resulting in content overflowing to the right when the viewport is shrunk down:

The Horizontal Nav with Horizontal Subnav demo also has a similar overflow issue, except it's overflowing on page load.

We could adjust the visibility of the ToolbarGroup's and set a width for the Nav components in these two examples.

[mcarrano]

This still has the issue of the user menu having a lighter background in dark theme.

@mcoker I thought that was fixed?

[mcoker]

@mcarrano I have a PR up that fixes it, but it didn't go in until late last night and it was too late to merge - patternfly/patternfly#5643. If we want to try and get it in, I have an open question in the issue here - patternfly/patternfly#5643 (comment)

[mcarrano]

Thanks @mcoker I would try to get this in if we can. As to your question on patternfly/patternfly#5643, I'm not sure what the right answer is and want to get input from @mceledonia . Will reach out on Slack to resolve this ASAP.

@nicolethoen can we still try to get this into the release? The user menu does not look correct without it in dark mode.

[tlabaj]

@thatblindgeye @mcoker it looks like we are missing a "pf-m-overflow-container" on the toolbar item that holds the nav. React does not currently support that. I can add it as part of this PR. It should fix that issue @thatblindgeye mentions above

[mcoker]

👍👍

[thatblindgeye]

Just a quick update below

[mcarrano]

User menu looks good now. Just seeing a couple of additional issues.

• The drilldown nav example seems to be broken: https://patternfly-react-pr-9223.surge.sh/components/navigation/react-demos/drilldown-nav/ I do see that this is broken in the latest release of v4, so not sure when that happened. But we should fix for v5 if possible.

• There are two examples that still use the word "legacy." Can we change this? Perhaps change them to "Tertiary (deprecated)" and "Light nav (deprecated)." Or should we just remove these examples if we don't want demos that use deprecated components. @tlabaj @nicolethoen @mcoker thoughts?

[tlabaj]

User menu looks good now. Just seeing a couple of additional issues.

• The drilldown nav example seems to be broken: https://patternfly-react-pr-9223.surge.sh/components/navigation/react-demos/drilldown-nav/ I do see that this is broken in the latest release of v4, so not sure when that happened. But we should fix for v5 if possible.
• There are two examples that still use the word "legacy." Can we change this? Perhaps change them to "Tertiary (deprecated)" and "Light nav (deprecated)." Or should we just remove these examples if we don't want demos that use deprecated components. @tlabaj @nicolethoen @mcoker thoughts?

@mcarrano there is an issue open for drilldown nav here #9183

I updated the demo titles

[mcarrano]

Thanks @tlabaj . I am good to merge this.

[kmcfaul]

lgtm.

I did notice that the nav drilldown demo looks like it may be broken, but this PR didn't touch that so we may want a follow up issue.