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.

New tasks as of 1/21/2025

• In the Make Sure Dropdowns Appear test, when "Our Work" is hovered, the menu items Work 1 and Work 2 need to be visible, currently items below the menu bar div are hidden.

• In transparent-mobile-mode](http://localhost:6006/?path=/story/top-nav-bar--transparent-mobile-mode&globals=viewport:iphonex), a horizontal scroll bar should never appear, it means something is rendering to wide or too far to the right. For example

[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.

[ddfridley]

@Chenxuan-Liu This one is assigned to you. I know you are moving on to a new job, shall we just move this on back to ToDo? Thanks.

[agrawalashita]

interested in working on this as an OPT volunteer

[ddfridley]

@agrawalashita great. It has been assigned to you and I have sent you an invite to the enciv developers team on github. Please accept it, so you can push your branch and move the issue to "ready to review" when ready. Thanks!