[BUG] Fix header to be mobile responsive and match designs

[srsexton94]

The header/nav component is not fully mobile responsive, with the tabs falling off the screen at various breakpoints.

It also does not fully match the wireframes with element sizing and by missing the "DONATE" button (which should functionally be a link, the URL is still TBD we can use a placeholder for now)

Bug screenshots:

This ticket is to make sure that:

1. Desktop and Mobile views match the wireframes
2. All elements in the header, at all breakpoints between mobile and desktop, are visible, functional, and have generally reasonable proportions
3. All elements in wireframes are included in the header (ie add the Donate button)

Final check - zoom page into 400% and make sure all elements are visible & functional (accessibility requirement - WCAG 1.4.10) (Note: this should largely be handled by the mobile responsiveness - if this seems like it will significant complexity we can break it out into a separate ticket)

Wireframes for intended design:

Desktop Header Mobile Header Closed Mobile Header Open

Out of Scope:

This ticket is not concerned with...

1. the mobile responsiveness with any content below the header
2. the interaction design of the tabs/button (ie. you don't have to fix where these tabs are going if they're not correct/functional)

[azemetre]

Happy to take a crack at it.

[azemetre]

Will include adding the Donate link in the mobile view as well.