search

PolicyEngine / policyengine-app

PolicyEngine's free web app for computing the impact of public policy.
GNU Affero General Public License v3.0
32 stars 88 forks source link

Make navbar more consistent across breakpoints and with similar sites #1564

Closed anth-volk closed 1 week ago

anth-volk commented 1 month ago

Currently, I think there are three major drawbacks with the navbar:

  1. Its height is 90px (very large) on desktop/tablet, but only 50px on mobile
  2. While it's mainly written against flexbox, liberal use of margins makes maintenance difficult
  3. It can really only fit a few options as written

Its height is particularly significant, since most sites place theirs between 60px and 80px, and its large size is what necessitated setting a custom value on mobile. I think this should all be changed as follows:

  1. Navbar height for all breakpoints should be set to 64px; Pieter Heyman has a good explanation of why here, but this is also what Material Design uses for its header bars
  2. The component should better organize items by using a nested flexbox approach, as opposed to manual margin settings
  3. Text height should be dropped to 16px

I will likely need to do these as part of #1561, as merely adding it to the existing bar produces a part that is extremely cluttered and forces poorly-sized wrapping on the large feature button that we utilize

daemon-reconfig commented 1 week ago

Can I also take on this issue?

anth-volk commented 1 week ago

@daemon-reconfig Unfortunately, this is currently in the works as part of #1583 (feel free to clone that if you want to check out what it looks like at the moment)

daemon-reconfig commented 1 week ago

sure I will check it out later