Header and menu styling and layout (map viewport change)

[bobular]

From https://veupathdb.atlassian.net/wiki/spaces/WG/pages/255033345/2023-04-24+Map+UX

Menu

• [ ] Make the line separating menu items from configuration panels darker / thicker to indicate that the 2 configuration panels are connected to each other

• [ ] Close drawer buttons

  • Button to close menu drawer is too small → make bigger
  • Now that header will no longer be close-able, the button to close the menu drawer can be repositioned → move to the top right of the open menu panel

Header

• [x] Header should remain open; remove the button to collapse the header - already in this issue --> https://github.com/VEuPathDB/web-monorepo/issues/107

  • The header contains essential information
  • The header should NOT hide points in the viewport (going forward, exclude points under the header from the viewport)

• [x] Header can blend into the url bar depending on browser configs

  • Try using a very light “theme” color (ie, light sage for VectorBase)
  • Alternatively, try using color borders around the header and menu and keeping the white
  • Do not use transparency as markers under the header will be excluded from the viewport

@asizemore has made mockups - not sure what the consensus is!

[asizemore]

I think people generally liked the light background best. We don't have mockups for a larger tab explicitly, though there were some discussions and ideas in the mockups (some are here, and others scattered around in there). If you'd like something in particular let me know!

[jernestmyers]

Note: there is a separate issue to maintain visibility of the map header.

Additionally, as stated in the PR:

Also related to https://github.com/VEuPathDB/web-monorepo/issues/125. Note that this does not address the issue of hiding data beneath the header.

[jernestmyers]

Close drawer buttons Button to close menu drawer is too small → make bigger Now that header will no longer be close-able, the button to close the menu drawer can be repositioned → move to the top right of the open menu panel

Regarding this, it was concluded that we should follow the "norm" (as established by maps by both Google and Bing) and place the toggle button in the center and reduce its overall size.

Conversation resulted in follow-up issue https://github.com/VEuPathDB/web-monorepo/issues/167