Animation: Hamburger menu & Navigation

[andrew-ronaldson]

Goal

The "hamburger menu" used to control our navigation component needs to include an animated svg transition to show the different states. Currently this button is using our standard icon button styling and this issue will build on that initial update.

Note: We should explore the use of the RH icon for this navigation control.

[andrew-ronaldson]

Made this Codepen to show the interaction for the Hamburger menu.
It does require dropping in the svg code to manipulate the paths with CSS.

[andrew-ronaldson]

I added a Figma prototype for the icon and open/close of the Nav drawer.

[andrew-ronaldson]

Navigation drawer from .pf-m-collapse to .pf-m-expand

Timing function
--pf-t--global--motion--timing-function--decelerate

Duration
--pf-t--global--motion--duration--md

Delay
--pf-t--global--motion--delay--none