TopNavBar layout handling + adjustments

[justin-b-yee]

Specs

We want to more easily configure adding components to the navbar, along with a few adjustments. Add a new prop sideButtons to take a list of components. These components will be rendered on the right side in the order they were provided from left-to-right.

Dependencies

Note: The component changes can be worked on without these - these are just needed for the final enciv home navbar change.

• Action button transparent mode enciv-home#56
• Action button with icon enciv-home#55

<TopNavBar
    ... // existing props
    sideButtons = [],
>

Tasks

Civil Pursuit Repo

• Layout adjustment: Make the logo, menu selections, and buttons vertically levelled (see mockup). Right now, the selections appear lower than the logo, and the logo is significantly taller.
• Fix any spacing/margin discrepancies, and ensure everything looks good relative to the mockup.
• If components are provided in the sideButtons prop, render them in left-to-right order, justified on the navbar's right side.
• In mobile mode, render the sideButtons vertically below the menu selections in the order provided from top to bottom.
• Use this new prop to render the previously hard-coded donate button.

Enciv Home Repo

• In the enciv home repo app.js, edit the TopNavWrap function to use the new navbar props and match the mockup.

Figma

• In condensed mode, the sideButtons should appear below the list, with 1 rem of extra gap. We don't have figma for this.

[ddfridley]

@justin-b-yee I added something for the condensed mode. Take a look. I moved it to todo but you can still edit if necessary.