Previously without responsive css/js design, the main menu and banner get cramped up when the screen size is smaller than 720px, which is the case for many mobile screens. This reduces the usability of the website in particularly being hard to browse, navigate, and click on the links.
This change focuses on redesigning the main menu and banner to make it easier to use when the screen estate is limited. Including making main menu slide out and search box expandable, and reduces the amount of information shown on the banner.

//

Changes added

- Adjust element displays on width < 720px (+media tags in base.less)

- Logo icon turn into mobile menu toggler when width <= 720px (+control logic in common.js)

- Translucent masking layer sit between mobile menu and rest of the page, closes the menu when clicked (+div dom in base.html)

- Moved account & support menu into its own template file and included in mobile menu (+navsupportmenu.html)

- Using search icon to display/hide search box in mobile menu to reduce screen estate usage

- moved menu toggle logic into it's own backbone view

Review board manage.py test
Firefox & Chrome window resizing to examine the css change
Menu toggle function working when window size <= 720px, including boundary case 720/721px
Closing menu by clicking the masking layer
Resizing window to > 720px after mobile menu opened will leave the translucent mask on with menu hidden, but the state will remain the same when the window is resized back to <=720px or mask clicked