App toolbar: Add menu items (rewards, portfolio) and responsive support

[armandomistral]

Background

The portfolio menu item is not shown in the app toolbar until the first investment has been made. The CFG rewards page is not featured in the menu at all (it can only be reached from the dashboard page). Since both portfolio and and rewards are important for investors, they deserve a constant place in the toolbar, so they are better accessible.

Current toolbar across different screen widths

Addition: Portfolio menu item

The Portfolio menu item is always shown if an Ethereum address is connected:
- 0.00 DAI if no portfolio yet
- Would require update/call to action of empty portfolio view

Addition: Rewards menu item

Add a menu item pointing to CFG rewards page to the header. The label shows the amount of earned CFG.

Change: Layout

• Remove divider lines
• Remove Investment pool label from pool switcher
• The header contents spread to the full width of the viewport.

Addition: Responsive design

• The header is supported on mobile-size screens. The hamburger icon triggers a full-height navigation menu incl:
  • Pool tabs
  • Rewards
  • Portfolio
  • Wallet related content
  • Help (from help button)

Breakpoints

Large: 1200 px viewport width

M: 900-1199 px viewport width

• Personal navigation as icons only
• Marquee logo if pool is selected

S: 0-899 px viewport width

• State M and:
  • Pool navigation shows only pool name
  • Wallet avatar (if connected)
  • Hamburger icon

State	Not connected	Selected pool	Wallet connected
Default
Hamburger menu