Make the mobile menu bar sticky

Currently this change can be discussed here: https://beta.foodsharing.de/?page=bezirk&bid=2296&sub=forum&tid=184006

What does this MR do?

Currently the menu bar is only sticky (fixed to the top of the page) on wide displays and therefor not always accessible on mobile devices. This MR fixes that. I suspect this functionality wasn't implemented initially due to problems that can arise with menu drop downs possibly being higher than the screen. I found a solution to this problem that feels natural.

How confident are you it won't break things if deployed?

confident

How to test

1. Checkout branch locally
2. Resize to a small device
3. Scroll around, open and close the menu, scroll the menu up and down while it is open.

Screenshots (if applicable)

Checklist

• added a test, or explain why one is not needed/possible...
• no unrelated changes
• asked someone for a code review
• set a "for:" label to indicate who will be affected by this change
• added to the next milestone (see https://gitlab.com/foodsharing-dev/foodsharing/-/milestones, unless it has a "for:Dev" label)
• added an entry to CHANGELOG.md - [ ] added a short text that can be used in the release notes (unnecessary)
• Once your MR has been merged, you are responsible to create a testing issue in the Beta Testing forum: https://foodsharing.de/?page=bezirk&bid=734&sub=forum. Please change the MRs label to "state:Beta testing".
  • Consider writing a detailed description in German.
  • Describe in a few sentences, what should be tested from a user perspective.
  • Also mention different settings (e.g. different browsers, roles, ...) how this change can be tested.
  • Be aware, that also non technical people should understand.

Release notes text in German

Das Menü ist in der mobilen Ansicht wieder oben angepinnt.