[BUG] Menu toolbar wraps menu entries if they don't fit

[sdecianu]

If you add a new entry to the menu, or rename the existing ones so that they barely fit, some of them will be wrapped to a new line and the clickable box for navigation is smaller and inaccurate.

A quick fix to this is to use flex-wrap: nowrap on the .nav class in top-bar.component.scss but that will make the menu even more unusable if there are too many entries, since no wrapping will just make some entries overlap.

[nicolaes]

Horizontal scrolls are not great on menus. Need UI/UX advice.

Ideas:

• reduce spacing, font size, or use shorter words
• merge Resources and Map in a single menu entry
• move less used menus to user dropdown menu (e.g. Organisations/Users)

[ketan-rathod-713]

• decrease the padding and font size to make it fit in menu

[minodora-c]

https://css-tricks.com/the-priority-navigation-pattern/
here is an elegant solution :)
a responsive solution where you don't have to force a CSS property making it potentially unresponsive
there are multiple solutions there but I think the one from https://www.ncsbn.org/index.htm suits the platform the best.
if you agree to any of them, I could implement it :)

[idormenco]

Hi @minodora-c
please open a PR with solution you think it's the best.
Any help is more than welcome.

PS:
Seems like you are a css guru so I will assign this issue to you ;) no pressure

[minodora-c]

oki, glad to help. I will first need to find my way around the code, hopefully will open a PR by tomorrow afternoon :)

[VladCuciureanu]

@minodora-c Hope you don't mind but I also tried my hand at this 😬
I wanted to explore the codebase a bit and this seemed like good place to start

[minodora-c]

@VladCuciureanu no worries, just uploaded my version too. I think a mix between our solutions could work well :)

[VladCuciureanu]

Nice solution! I was wondering how you were going to solve it while I was hacking away at mine.
Your solution is more flexible so it makes sense to continue with yours

It was a fun experiment to see how someone else would go about it though 😂