[feat] New Figma component for portal navigation about red-hat-design-system

[coreyvickery]

@littledezine Hey Cheryl, I have added the following Customer Portal navigation components to the Figma library. The Header navigation component is the Universal navigation and Primary navigation components stacked on top of each other. If you want to know the story of these names, I can tell you somewhere else.

Header navigation

Viewport sizes

• Desktop, large (1680px)
• Desktop, medium (1440px)
• Desktop, small (1200px)
• Tablet, large (992px)
• Tablet, small (768px)
• Phone, large (576px)

(Note: Phone, small (360px) and Phone, extra small (320px) are not included because they degrade to the Primary navigation component because of the lack of space.)

---

Universal navigation

Viewport sizes

• Desktop, large (1680px)
• Desktop, medium (1440px)
• Desktop, small (1200px)
• Tablet, large (992px)
• Tablet, small (768px)
• Phone, large (576px)

(Note: Phone, small (360px) and Phone, extra small (320px) are not included because they degrade to the Primary navigation component because of the lack of space.)

---

Primary navigation

Logged out

Logged in

(Note: The avatar in the Logged in state is a slightly newer version of rh-avatar. I updated the design very slightly to match pf-avatar in PatternFly 6. This update has not been coded yet, but the design is current and aligns to PatternFly 6.)

Viewport sizes

• Desktop, large (1680px)
• Desktop, medium (1440px)
• Desktop, small (1200px)
• Tablet, large (992px)
• Tablet, small (768px)
• Phone, large (576px)
• Phone, small (360px)
• Phone, extra small (320px) - accessibility testing requirement

cc @marionnegp

[littledezine]

Thank you @coreyvickery