Bolt 335 sub nav improvements

[markdoran-ft]

Useful information

Ticket: BOLT-335
Designs: Figma

Description

This PR introduces the following changes:

1. Styles and behaviour of the sub navigation dropdown are now controlled by screen size and not whether the device supports hover or not.
2. The dropdown can now contain a selected item that will display in teal.
3. Various updates to the styling of the dropdowns including:

• Reducing the spacing between list items
• On mobile devices increasing the space between the edge of the window and the dropdown modal
• Adding a transition before the dropdown is displayed. This transition will match the transition that is used when the meganav moves into view.
• On smaller screens, where the dropdown with the close button is displayed, a scroll lock has now been added. You can scroll on the menu but cannot scroll the content behind the menu.

4. Now uses o-header v 15.5.0 which updates the keyboard handling of the subnav dropdown on both mobile and desktop.

Screenshots

Updated desktop

Before	After

Updated mobile

Before	After

[Stegosauruss]

LGTM on mobile and desktop. Animation is consistent with meganav. Nice work