Implement drawer functionality

Adding more definition and screenshots on the IS to define and limit the scope.

Okay, I pushed fixes for the above. Now:

1. The mobile styles should work again
2. The expanding nav should be in sync with the submenu animation
3. The animations should be more performant
4. The animation timing is abstracted to a variable
5. Animations are disabled if user prefers-reduced-motion
6. Lint errors are fixed

These aspects are ready for review.

TODO

There's an outstanding issue with z-index levels for the submenu drawer animation. The submenus should slide out from behind the navigation, and this works, except for the footer element, which is a sibling of the content nav. This causes the footer submenus to animate over the navigation.

Would it be okay to move the footer nav inside the content nav, and achieve the same visual effect via CSS? I'm not sure if there are accessibility implications here. Screenshot of potential markup below.

I pushed a fix for the footer submenu z-index issue, above, and should now be fixed.

While fixing that issue, I noticed the mobile submenus don't have the correct size across screen sizes, so I'm looking into that now.

I've pushed a fix for the mobile submenu size issue, above. All know issues have fixes applied. This issue is now ready for review.

I see few issues on mobile and desktop js behaviour. i would like to have them fixed aswell.

This is looking great! Almost there :D

I'm still seeing the error where, after opening one of the main parent items, it doesn't close when I hover another item:

ckrina → closed merge request !204

ckrina → reopened merge request !204

one detail i've noticed, if you open up a submenu you then have the label of the top level menu item as the "heading" now. That heading is clickable by the mouse but it has an invisible focus outline when you tab through the menu by keyboard (ref wcag sc 2.4.7 - focus visible).

Confirming receipt. Working on the issues outlined.

@ckrina Woops, I forgot to fix dismissing the submenu on hover out. Pushed a fix for that!

Moving it back to Needs work because @finnsky is working on JS fixes.

As mentioned yesterday in Slack, I'm still seeing weird behaviors and I think it's related to the fact that the open/close is reacting to hovering something else, when the event to trigger that change should be related to the element itself you’re interacting with. For example, if I leave the user menu to click on the collapse button, that should close its child drawer. But doesn't:

Moving to Needs Work to draw attention to this, because if an event as key like this needs to be changed it's better to do it in this issue.

This one is ready to go.

And merged! Thanks everybody involved, specially @bronzehedwick and @finnsky for the great work and collaboration with this time-sensitive key feature!

Automatically closed - issue fixed for 2 weeks with no activity.