Implement responsive navigation design

[rosslovas]

Summary

Implements a responsive design: when the viewport is any more narrow than 1130px, where there's no longer sufficient remaining space to fit everything reasonably in the normal layout, the layout changes to a more mobile-friendly one.

Results

Try it out at https://stoctodocspr3377.z22.web.core.windows.net/docs?newnav

To test the signed-in state:

document.cookie = 'OctopusSignedInUser=' + encodeURIComponent(JSON.stringify({fullName: 'John Doe', email: 'jd@example.com'})) + ';path=/';
window.dispatchEvent(new CustomEvent('octopus:user-changed'));

(revert to the signed-out state with:)

document.cookie = 'OctopusSignedInUser=;path=/;max-age=0';
window.dispatchEvent(new CustomEvent('octopus:user-changed'));

Before

Squashed, no responsive design

After

Menu closed

Sections menu

Menu open, signed out

Menu open, signed in

Profile menu

[team-marketing-branch-protections]

Pull request environment is available at https://stoctodocspr3377.z22.web.core.windows.net.

You can view the ephemeral environment status in Octopus Deploy.

This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity.

[enf0rc3]

LGTM Tested on browser!

[ellen-octopus]

Looks so good 👏🏻