#15 Add navbar

[chelseaharris137]

Description of Proposed Changes

This PR resolves #15

Type of Change

• [x] New feature (non-breaking change which adds functionality)

Testing

Spin up the application. The navbar should appear on the homepage. Test mobile responsive in devtools.

Checklists

GitHub

• [x] Related issue appears at beginning of pull request title with pound sign, and title describes the changes being proposed.
• [x] Related issue is linked in pull request description using closing keywords.
• [x] The appropriate label has been chosen for this pull request.
• [x] The correct project has been selected for this pull request.
• [x] All commits in this branch, including merge commits, begin with the issue number and a pound sign.

Code Standards

• [x] Code follows the style guidelines of this project.
• [x] Code comments have been added, particularly in hard-to-understand areas.
• [x] I have performed a self-review of my code.
• [x] Any dependent changes have been merged and published in downstream modules.
• [x] These changes generate no new warnings.

Documentation and Testing

• [x] New and existing unit tests pass locally with these changes.
• [x] Corresponding changes to the documentation have been made.
• [x] Tests have been added, where appropriate; or, no tests are relevant for this pull request.
• [x] This pull request contains UI changes, and screenshots of those UI images appear below; or, this pull request contains no UI changes.

Screenshots

[chelseaharris137]

I might have missed this at some point -> what is our UI testing strategy? I have not implemented tests but can update once I have more info.

[CodeDiversity]

Overall, I think it looks amazing. Nice job. I know we didn't have mobile comps, but I am thinking that a hamburger menu might better suit us on mobile. Thoughts? If not hamburger menu maybe make them full width links/actions with borders on top and bottom only. Totally up to you.

[seidior]

I might have missed this at some point -> what is our UI testing strategy? I have not implemented tests but can update once I have more info.

We have not decided on test libraries for frontend or backend code. I have experience with some of the most popular ones, but I'd love to hear from the community what works best for them before guiding toward one library over another.

Resources:

• Next.js: Testing

[seidior]

An update on this PR:

• In order to save time with a back-and-forth over GitHub, I opted to address some of the issues from the pull request review in a separate branch, giving the room to do some research to establish baseline standards for developers contributing Atomic Design elements in the future while preserving as much of the great work that was already done in the ticket, then chat with Chelsea directly about the changes.
• Chelsea gave the go-ahead to merge the changes into the branch for review and for additional work before the next review:
  • Another pass will be given to the color changes as well as any other modifications necessary to find a compromise between what is designed and what will give the best developer experience for other contributors in the future.
  • More consistency will be added in the styles, such as between background and outline colors as well as consistency with Tailwind conventions (while preserving the AriaKit styles so as not to break these components).
  • Any changes to the design will be communicated with the design team for their approval and sign-off.
  • Finally, the screenshots in the PR above will be updated with the final design for this.

After Chelsea is done improving my contributed changes, I'll take another look and flip my review to "approve" so I'm not a roadblock on this anymore :)

[chelseaharris137]

Hey All - I've made some updates to dark mode and have reached out to Wren to discuss flexibility with our themeing colors. Waiting to hear back from her. I'm going to have to step away from this for now but feel free to make any additional updates needed.

[seidior]

Reviewing the PR right now, and this is the dark mode display for me:

Given that Chelsea reminded us about unavailability, I'll go ahead and make the changes to improve the display here as well as update the screenshots in the pull request description when those changes have been pushed. Thanks for your work on the ticket!

[seidior]

Very slight tweak based on feedback from the design team: the NavBar is now translucent white instead of translucent gray, which better matches the design and gives us better scores on accessibility.

Other than that, this is now approved for merger.