Settings navigation is hidden behind the main side navigation

[dgtlntv]

Describe the bug
On "small" breakpoint the settings navigation is hidden behind the main side navigation

maas-ui version
3.4.0~alpha1

To Reproduce

1. Go to settings
2. Set screen-width between 620px and 1036px (the "small" breakpoint in Vanilla)
3. Open Settings navigation
4. Settings navigation is now hidden behind the main side navigation

Expected behavior
Probably, that the navigations are side by side, but UX Design could be needed.

Screenshots

Desktop (please complete the following information):

• OS: macOS Monterey
• Browser: Chrome (Version 110.0.5481.77 (Official Build) (arm64)), Firefox (109.0.1 (64-bit))

[petermakowski]

One way of solving this that won't require a lot of design input is increasing the z-index to make sure the settings menu is displayed above the side nav when opened.

Ideally we'd need to confirm what we want this to look like, if you could have a look @amylily1011

[amylily1011]

I seem to have problems with the big screen as well, because the settings nav is in the center but the main nav is left most. This feels a little annoying, because the distance between the 2 when increasing the screen size is too much.

[amylily1011]

After discussing this with @lyubomir-popov, we think we can utilise the quick side nav as a solution for the settings page. I will create a ticket for this in Jira to follow up.

[petermakowski]

For reference: https://warthogs.atlassian.net/browse/MAASENG-1364