Navbar causes problems on mobile view

[macqbat]

Gracefully degrade the header and navigation for Console in order that you can still browse the app and see content (that doesn't require a wallet to use)

Considering how we handle wallets i.e. collapsed in the nav what we should align with governance and what should be different

Description

A clear and concise description of what the bug is.

Steps to Reproduce

1. Go to market page
2. Change on emulator of mobile view
3. See error: view it too wide, because Navbar widens the entire document body element.

Expected behavior

Navbar should be at most so wide as display

Screenshots

[pennyandrews]

Need to address the navigation on mobile for Console but consider Token and Block Explorer to ensure that it works for these too

[joellecharlotte]

Here is the dApp Navigation file which shows the solution across mobile for all dApps. I have linked directly to Console navigation but Explorer and Governance are there for context as to how the pattern and behaviour should apply across all.

I have implemented @macqbat's feedback around moving the theme switcher into the navigation drawer on smaller breakpoints. This retains the icon currently and I have also introduced a switch. Use of icon TBD in the case where the other nav items do not have an icon (maybe it's fine) but just know that this will live in a section in the drawer, below the primary nav items - across all dApps on mobile.

On mobile the nav items use the same component, with the option to have a leading icon (only Explorer) or a trailing icon to indicate sub navs or external links.

@neildawson is also working on revised wallet designs and interactions that will move the wallets into a drawer(s). TBD and to be resolved as a separate piece of work. The way we see things working on smaller breakpoints is the navigation lives in its own drawer and the wallet lives in its own drawer.

For future context - we are thinking of introducing a drawer for wallets on desktop also, design and functionality TBD.