BUG: Hamburger menu does not render properly

[rogu-beta]

Describe the bug
When resizing the browser window to a smaller width, DejaCode eventually collapses the top menu bar with into a hamburger menu. Unfortunately, the layout of it completely broken.

To Reproduce
Steps to reproduce the behavior:

1. Open DejaCode
2. Resize the width of the window (e.g. half your screen size)
3. Notice that a hamburger menu appears, instead of displaying "Product", "Components", "Packages", "Licenses", "Owners", and "Tools"
4. Click on the hamburger menu

Expected behavior
The hamburger menu should display the entries in a vertical list with a proper background color so that it is readable. The search bar should be placed somewhere else or reduced in width. Similarly the namespace/account information need to be placed within the vertical list and aligned with the other entries

Screenshots

Context (OS, Browser, Device, etc.):

• Firefox

[Theminacious]

Hi! I’d like to work on this issue. Could you please assign it to me?
If there are any UI guidelines or preferred approaches for fixing the mobile menu layout, please let me know. Thanks!

[Kaushik-Kumar-CEG]

hello! @tdruez

This issue along with the bad rendering of dejacode main dropdown menu has been fixed in #475

Resolved:

• Transparent background in collapsed navbar
• White text on white background in light mode (critical readability issue)
• Menu interaction conflicts between hamburger and dropdown

it is ready for review!
please take a look at it when you can :)