Implement the sliding navigation JS

[petesfrench]

Done

This work is based around the changes to found here

• Implements the logic for the sliding navigation
• Some HTML changes to matches the changes in the aforementioned branch

QA

• Go to demo on mobile view
• Click the 'menu' button, see that it opens the navigation

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12081

[webteam-app]

Demo

Jenkins

demos.haus

[petesfrench]

@britneywwc re blackbox of doom: I have an issue here https://warthogs.atlassian.net/browse/WD-13674, but I think this should be dealt with on Vanilla.

Can you take another look please?

[britneywwc]

Thanks for addressing the comments. I found a few more bugs when re-reviewing.

When I navigate to Menu > Careers, there is weird padding on the header.

In the same navigation, there's also no way to scroll any lower to check out the links below "Diversity"

[britneywwc]

When I scroll all the way down in the navigation, it will continue the scroll on the main page - can we lock main page scroll when user is in mobile navigation view?

Another thing is when we reach the bottom on scroll, close the nav menu and reopen it. The nav menu reopens but it shows the bottom part of the navigation and might be misleading of a missing nav (screenshot below).

[petesfrench]

@britneywwc I spoke with Bartek about these issues, see conversation. They seem to be related to the Vanilla implementation of the sliding navigation, he is going to look into it earlier next week.

[petesfrench]

@britneywwc I would like to merge this so we can continue work on other aspects of the sliding navigation (such as the 'available roles'). I have created an issue to address this in the future: https://warthogs.atlassian.net/browse/WD-13674

[britneywwc]

Thanks for upstreaming this issue to Vanilla. If they are related to the sliding nav implementation then I'm okay to merge this 👍!