fix 3234 add overlay to menu

toni-sharpe commented 4 months ago

Intro

As stated in my comment I have brought this up once the style is applied. A few images to look at.

Some further requirements to come as issue discussions raised three pages and states they should all function with the same style and behaviour:

http://localhost:3030/age-structure http://localhost:3030/charts http://localhost:3030/entries-by-year

Issue

https://github.com/owid/owid-grapher/issues/3234

Applying overlay

ensure article header is still visible on article pages using a new z-index variable
that z-index is calced from the site-header value
this ensures the search box overlay still works as it does currently, covering the artcile header
overlay is on ToC click and tested as click-away in both contexts: with and without an article header
the "open on load" ToC at larger screen sizes logic is removed

Suggestion

Move the close button to the left of the menu.

This means the menu can be toggled open and close without moving the mouse and puts it within easier left thumb range for standard use of a hand-held device (and the thumb doesn't need to move either). The edge of the clickable area can also touch the edge of the screen, making the click target easier to hit, some part of Fitt's Law.

Consistency

For consistent styling I had to get this page too, it's pushed up, but wasn't originally asked for.

So over to you as technically this breaks the Contr. Guide. The commit is isolated.

But it also makes me wonder where else the consistency might be broken, fairly complex site, bits I've never seen etc. put me at a disadvantage answering this. It's more likely a "type of header" list than page list.

Screenshot 2024-05-10 at 06 18 15