Bug: some users expect the top-left dropdown menu to be related with the search box

[sandriu]

One way to get rid of this confusion would be to:

• move the links from the 'Informations' menu in the footer (2 simple links, on the same line, placed above the copyright line)
• delete the top left dropdown menu (desktop and mobile)
• on desktop, the top left corner of the header will only contain the search box
• on mobile, the top left corner will contain a search icon, which expands into a full search box when clicked
• fix some mobile bugs
• fix the double appearance of the search icon on mobile.

[CatalinFrancu]

Done and pushed to staging, please take a look.

I don't particularly like the left drawer now (on mobile). It expands on the entire height of the screen, but only uses a search box. Perhaps it would be better to only use the height of the search box?

Related TODO: The navbar searchbox could be wider, at all breakpoints.

[sandriu]

Perhaps it would be better to only use the height of the search box?

Yes, it would be better. After all, most websites use such a behaviour (see the search box from medium.com for example).

Related TODO: The navbar searchbox could be wider, at all breakpoints.

Agree too.

[CatalinFrancu]

Pushed some tweaks to staging:

• left menu is only tall enough to fit search box;
• surface backgrounds;
• search box receives focus when left menu opens;
• fix search box width at various breakpoints.

[sandriu]

I noticed the following problems on mobile:

• on light mode, the search box is surrounded by a white area (it should be the same colour as website header):
  

• on light mode, the top right menu has lost its dark background:
  

• on mobile, once the search box is expanded, it could occupy the full width of the page (it would help users see more text from the query they are typing in):
  

[CatalinFrancu]

Fixed the three items above and pushed to staging. Please note that the left and right menu now have different background colors.

[sandriu]

There's one more thing to fix now: when the search box is expanded, we have 2 search icons in the header, which is confusing:

Most websites use the following interaction: the search button (or the menu button) transforms into a 'close' button (an X) once the search box (or the menu button) is clicked, and this close button is used to collapse the search box. See a live example on TheGuardian.com (you must see the mobile version).

[CatalinFrancu]

the search button (or the menu button) transforms into a 'close' button (an X) once the search box (or the menu button) is clicked, and this close button is used to collapse the search box

Done and pushed to staging!