Create Menu component

[breadadams]

• Depends on Create Button component #1
• Depends on Create Text component #5
• Depends on Create Header component #2
• Depends on Create ContactDetails component #7

Zeplin

Notes

• We're not going to have the showcase page in Phase 1, that link should be crossed out & disabled, with a "Coming soon" tooltip.
• The estimate calculator won't be in Phase 1 either, the button should be in disabled state with "Coming Soon" as the button label.

Effects

For desktop the "intro animation" for the menu will have quite a few steps, those are:

1. Upon clicking the header's menu toggle, a layer appears over the page (but below the header).
2. Next the yellow calculator CTA fills with yellow from left to right.
3. When the CTA fills, the map container does the same with a white background.
4. As 2 & 3 are taking place, the Wombak text scales and translates to below the "W" cutout.
5. Finally the calculator CTA title fades in from the right, the button fades in in-place, as do the menu items, contact details and the map.

On mobile we could just do a general fade-in of everything.

[gabrielperales]

What about making a glitch effect on hover menu items. Something like this https://css-tricks.com/glitch-effect-text-images-svg/

[breadadams]

I like it, maybe we could incorporate something like this into the branding 🤔