Dynamic SessionMenu flyout

[koepferd]

Does the proposed refactoring task solve a problem, reduce complexity or even improve performance? Please describe.
The session menu is currently fixed. There are some menu items which are shown next to the username in the session header on desktop. In tablet/mobile all menu items are in a small flyout menu.

Describe the solution you'd like
The preferred solution would be a dynamic menu - when there is enough space on tablet and desktop beside the username it should display the amount of fitting menu items next to it instead of inside the flyout menu. All items which don't fit should move to the flyout menu.
For usability on mobile all the items should always be displayed inside the flyout menu there.

Additional context
The menu items highly differentiate depending on the different userRoles and sessionTypes.
You'll find the react logic in the file "SessionMenu.tsx".