codeforboston / maple

MAPLE makes it easy for anyone to view and submit testimony to the Massachusetts Legislature about the bills that will shape our future.
https://mapletestimony.org
MIT License
44 stars 118 forks source link

Nav-bar Update 2 #1553

Closed mertbagt closed 4 months ago

mertbagt commented 6 months ago

Summary

current issue: https://github.com/codeforboston/maple/issues/1389 next issue: https://github.com/codeforboston/maple/issues/1390

Tertiary Changes:

bluey

Follow Up Issues/PRs:

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

Checklist

Screenshots

image

image

image

image

image

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[bot] commented 6 months ago

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
mertbagt commented 5 months ago

Figma updates (bottom of this page):

https://www.figma.com/design/IyRpfsVrU2pg3rysLauvQR/[Ready-to-Dev]-Navigation-and-About%2FLearn-Copy-Changes?node-id=4356-14&t=Z1oNqBKKaUAHRcZ2-0

Mephistic commented 4 months ago

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: