Create reusable sticky navigation bar

[elainen]

Is your feature request related to a problem? Please describe.

We have a sticky nav that we have been recreating for a lot our sites that have the same kind of behaviors:

• Logo on the left
  • Clickable to Home
• Navigation items on the right
  • Sometimes a "utility" nav with smaller text on top
• Sub nav items showing on hover
• Logo on the left on mobile
• Hamburger icon on the right
• Nav tends to be part of the page when its at the top
• Nav becomes sticky when scrolling past the top fold
• Nav disappears when scrolling past the top fold
• Nav reappears when user scrolls back up

Describe the solution you'd like

Let's turn this into a HZ Core component! Retrieve all the current navs that have the same basic behavior from recent projects and create a functional (not design heavy, but design flexible) nav component.

Describe alternatives you've considered

We have so far just copy pasta'd other components from other projects or we've just built it from scratch all over again.

Additional context

Some recent-ish sites that have this kind of nav: http://2u.com/ https://www.45rockefellerpenthouse.com/ https://open.maryland.gov/ https://organicvalleyingredients.coop/

[lettertwo]

Other examples: https://bcw-global.com/ https://www.rockefellercenter.com/

[lettertwo]

There's also a 'scroll up bar' example on the hzcore useScrollDirection hook: https://hz-core.netlify.com/use-scroll-direction#examples

[lettertwo]

42 could be useful for this