New navigation with CTA

[yoavaviram]

AC

The menu items are displayed in custom order as presented in the list, with links to a different screen or to the same page (anchors). In the app, menu items should be tagged as 'main menu' or 'secondary menu', where secondary will appear on mobile underneath the CTA and the main menu will appear above the CTA (please check designs for further detail).

• The secondary menu only appears on mobile
• Contact us is a mailto to [email protected]
• The search bar will appear always by the nav

Designs ready

Desktop: https://zpl.io/ankXJJk Mobile close: https://zpl.io/bz6lPdl Mobile open: https://zpl.io/aBKn0Dq

Animation:

https://drive.google.com/file/d/1gO9SfAmGf79SoTtQ7-C1QSJ6-G8-w9v3/view?usp=sharing You can use the "spin" css animation for the hamburger: https://jonsuh.com/hamburgers/

[roughprada]

@steevevadakkumchery I've just linked an animation for reference.

[roughprada]

@steevevadakkumchery from the conversation in whatsapp:

I think the only comment about the sections is that it should be easy to change (can be with the code) to add either a:

1. anchor point to the same page
2. anchor point to a different page
3. a link to another page
4. a link to an external site

The button should scroll to the search bar and focus on it. If we could reorder them differently from desktop and mob, that'll be ideal, but as I said, it can be an easy thing from the code itself, we can have a change request if needed

[roughprada]

After a chat with @steeve vadakkumchery about the next steps and he is happy to:

1. wait till Mark merges the fixes on the master to then take those
2. divorce the Prettier actions from the ticket, so we can merge the nav on its own.
3. Add tests to this branch
4. create a different branch for the Prettier changes (@steevevadakkumchery can you add this ticket as well?)