Dynamic "more" dropdown

[AntonKhorev]

Moves secondary nav menu items into / out of the More dropdown depending on the browser window width, as explained earlier in #4854 (comment). This lets to use screen space more efficiently as opposed to the current all-or-nothing "compact mode" where either the entire menu is visible or it is fully collapsed into more, see #5151 (comment).

Fixes #4130 because "compact mode" is gone and changes in #4842 and #5151 make it possible to switch between "small mode" with a burger menu and "wide mode" at a fixed width as described in #4130 (comment).

You'll notice that I also left-aligned the menu. That has to do with minimizing the blinking when the javascript menu code runs. Before the code runs, all menu items are visible. After it runs, some of them may get collapsed into More. If I kept them right-aligned, that could cause them to move right. The currently deployed version also has this kind of blinking, with the difference that all menu items appear and then possibly disappear if "compact mode" with More is triggered. Also some people may actually want History and Export closer to where they were before #5151.

---

I also experimented with removing More and letting the menu occupy multiple lines if necessary but I didn't like the results. Sometimes three lines are required, then line height has to be reduced. This makes it more difficult to click the menu entries even with a mouse, touch interfaces probably degrade even more.

[nenad-vujicic]

Somehow it moves all remaining buttons too early on my side. Here is a video:

Recording.2024-12-02.160542_compressed.mp4

[AntonKhorev]

it moves all remaining buttons too early

Do you mean the width breakpoint for "small mode" with burger menu is too high? It has to be one of the Bootstrap breakpoints if I'm to use their navbar later. The only smaller breakpoint is 576px, but even with both History and Export moved to the secondary navigation things are not going to fit in some locales. This is ?locale=bg:

If we really want the 576px breakpoint, a possible extra trick is to hide "OpenStreetMap" next to the logo between 576px and 768px.

[nenad-vujicic]

it moves all remaining buttons too early

Do you mean the width breakpoint for "small mode" with burger menu is too high?

No, I think "next change" should be moving User Diaries to More, not switching to burger menu. Then, on next width decrease, moving GPS Traces to More .. i.e. it should behave like wrapping (flex-wrap) but instead of automatic moving to next line (wrapping) it should move buttons to More.

Somehow, I prefer this PR (initial commits with mentioned improvements) over #5370 but let's hear what others have to say.