Nav-bar Update 2

[mertbagt]

Summary

current issue: #1389
next issue: #1390

• split TopNav into seperate components: DesktopNav and MobileNav
  • this is because the design for each view doesn't use the same order of objects and wanted to avoid tons of nested if statements
• used specific widths for DesktopNav elements because those elements will remain statistically sized across screen sizes; the Search Element will expand and contract to fit the screen size
  • Currently, there is a Placeholder Widget as we do not have an independent search component at the moment. This Widget is currently set invisible. Turn that off if you want to see it but it's sole purpose atm is to take up space.
• profile icon reversed to blue on white, per the Figma
  • matching org icon used where applicable
• Mobile view is minimally altered and resembles the old Hamburger -> Logo -> Profile/Login layout; getting it to match the Figma will be a future PR
• the old "Why Use Maple" dropdown was subsumed into the "Learn" dropdown to preserve spacing

Tertiary Changes:

• One button "browse bills" on the HeroHeader was set to use colors that were hard to distinguish against the background - this was changed to use colors in the Figma
• Log In button on the HeroHeader's text changed to match the Figma

Follow Up Issues/PRs:

• we do not currently have a Universal Search Widget. I suggest
  1. potentially using the Bill Search as a temporary placeholder
  2. then comparing Bill Search and Testimony Search to figure out how to put a Universal Search Widget
• update Mobile view per the Figma

https://www.figma.com/file/IyRpfsVrU2pg3rysLauvQR/[Ready-to-Dev]-Navigation-V2?type=design&node-id=4356-14&mode=design&t=kX9UkJnwrUrn51Tf-0

Checklist

• On the frontend, I've made my strings translate-able.
• [n/a ] If I've added shared components, I've added a storybook story.
• I've made pages responsive and look good on mobile.

Screenshots

Known issues

1. hydration issues: used some isClient code in components/layout.tsk to resolve them but there may be a more elegant solution
2. the Figma does not have a tiny arrow next to the profile icon: I can build the dropdown differently to avoid the arrow but then it has subtle inconsistencies when compared to the nearby dropdowns
3. the tiny arrows don't flip up and down when their corresponding dropdowns are clicked on. I didn't find any Bootstrap functionality to do this.

Steps to test/reproduce

1. fire up Maple and compare the nav bar to the Figma
2. click on various links to make sure those still work

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maple-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 5, 2024 4:49pm

[Mephistic]

Just to follow up on our discussion during hack night: We attempted to use the Bootstrap Navbar component to handle switching the layout responsively based off the screen size. Upon review, we decided that this approach feels less maintainable than keeping the two separate MobileNav and DesktopNav components, given the design spec we're working from.

As a middle ground, we have:

• Moved links to a shared file (to ensure Mobile and Desktop are using the same URLs)
• Agreed to spec out an issue for an integration test that confirms the Mobile and Desktop navs both have the same links (could be a good issue for new people to write up)