Redesign main desktop menu for mobile

[bobintetley]

The main desktop menu works horribly on mobile.

Construct the header differently for mobile browsers (ie. viewport with <= 480px).

Show the home page icon, then a burger/menu button and username button on the same top line. The current menu buttons become accordion sections inside that burger menu, with the menu button contents generated as normal.

The search box should then be on a line below for mobile.

[bobintetley]

also, while we're mucking about with this, might be nice to show the generic user icon in place of the username in the button and float it off to the right

[bobintetley]

This isn't nearly as easy as this ticket make it sound and it adds an extra click to every menu open. main.menu_html needs an alternate method to construct the menu if it's to be done with accordion sections for each top-level menu.

[bobintetley]

One user was asking about whether the menu position could be sticky so they don't have to scroll back to the top (or have a back to top link). Something to bear in mind. Not sure how nice it would play with sticky table headers.

[bobintetley]

At least the menu structure is an abstract group of objects. Why not just render a separate/different menu structure altogether when window.width <= 480px ?