New approach to branding in the masthead and navigation

[mceledonia]

After collaborating with the brand team we've reached a solution that I think will be a notable improvement to how branding exists in the current masthead and navigation.

The problem:

• Currently the full logo exists in the masthead next to the menu button in the top left. Because of wildly varying product name lengths, this creates inconsistency around how much room the brand/logo takes up. This unpredictability in how much room the brand takes up becomes an issue when other items exist in the masthead, for example a context switcher.

The solution:

• It was confirmed that rather than having the logo + text full lockup in the masthead, we can now use just the logo, as long as the product name appears elsewhere.
• The logo itself can appear in the same location, and we've determined that the product name can exist elsewhere in plain text. This allows it to wrap wherever needed, rather than needing to adhere to product logo specs where "Red Hat" appears on its own line.

I think this solution should be adopted for the new Penta theme, but it would also be a great improvement to the PF5 classic theme.

Below is a very quick mockup of how this could look in Penta.

CC @lboehling @mcarrano @andrew-ronaldson @mcoker @evwilkin @nicolethoen

[mcarrano]

I like this @mceledonia . But my question is how does this work responsively? Looks like the product name is part of the sidebar vs the masthead here? What happens when the nav/sidebar gets hidden on a mobile device? Would be good to explore that a bit more.

[mceledonia]

On mobile with menu collapsed I'm pushing to drop product name. On expanded it would show as seen above. Here are two examples with a possible context selector approach as well.

[mcarrano]

Converting to a discussion for more visibility and conversation.