Fix UX details in hamburger menu

[andreslucena]

:tophat: What? Why?

This PR introduces a couple of mini changes based on #12932

:pushpin: Related Issues

• Fixes #13015

Testing

Open the hamburguer menu in a mobile resolution. Check the Acceptance criteria from #13015:

• [x] Given the hamburger menu is opened, when the menu expands, then it should occupy 100% of the screen height.
• [ ] Given the hamburger menu is opened, when participants view the menu items, then the access to help pages (/pages) should be visible after the menu items.
• [x] Given the language selector is in the hamburger menu, when participants use the language selector, then it should have the same style as the locale configuration in the participant's account settings.

:camera: Screenshots

:hearts: Thank you!

[andreslucena]

@carolromero I'm hesitant about this

Given the language selector is in the hamburger menu, when participants use the language selector, then it should have the same style as the locale configuration in the participant's account settings.

As exactly the same style could be too big and too notorious. The thing is that the search bar does not have a border, and the locale switcher in the account settings is like this:

So, I removed the border so at least is a bit less noticeable. Let me know if you want to tune it a bit (we can do a bit of pair programming to iterate faster)

[andreslucena]

If we merge this, we loose mobile access to (...)

Uooops, I was working in other PRs related with the seeds and I had a memory lapse after introducing the :mobile_menu change 🤦🏽

It should be fixed in the last couple PRs: I introduced the spaces and also added a spec just in case.

This is ready for another round.

[andreslucena]

when omnipresent banner is displayed, and when the admin bar is being shown, the following content is rendered

Nice catch! To be honest I didn't noticed this misbehavior of the omnipresent banner until you mentioned. It's one of those things were once you've seen it once, you can't not notice that its there 😄

I went to another alternative for fixing this issue:

1. Moving this banner (and the others that we can have: offline and impersonations) to the sticky header
2. Adding a dynamic margin top to the container that's being covered by the sticky header, as we don't know if the margin top should be mt-24 or other, as we could be an admin, have the omnipresent, and be offline at the same time (for instance).