UX design: Resize the podman-desktop navigation menu (preferences)

[axel7083]

Is your enhancement related to a problem? Please describe

Following some discussing on the UX call, and https://github.com/containers/podman-desktop/pull/8754, we noticed that the navigation menu components are taking a lot of spaces.

[!NOTE] The navigation menu takes ~1/5 of the podman-desktop screen. (on a 1050px podman-desktop window, the menu takes 225 px => ~1/5)

With the generalization of this sidebar in Kubernetes we are facing some space issue

a concern from @cdrage was the readability of the Kubernetes objects with the navigation menu taking 1/5 of the space

Describe the solution you'd like

While discussing this subject we took the example of OpenLens, we noticed they are using a way smaller navigation menu, and is resizable

https://github.com/user-attachments/assets/aacf27b5-0bc8-4649-a6a2-f4deae1edb01

Describe alternatives you've considered

No response

Additional context

No response

[deboer-tim]

The text doesn't actually propose what to do. :) I assume you mean we should make the default nav width smaller, and allow resizing?

[axel7083]

The text doesn't actually propose what to do. :) I assume you mean we should make the default nav width smaller, and allow resizing?

Sorry if I was not clear enough, the proposal would be yes to have the navbar smaller as discussed in the meeting for the Kubernetes screen it would takes too much spaces.

The resizing is not part of the ticket, but was a showcase of what other tools were doing

[cdrage]

@ekidneyrh What's your opinion on how to reduce the size while maintaining good UX / UI?

I have added a PR here to demonstrate the changes I was proposing: https://github.com/containers/podman-desktop/pull/9090

[ekidneyrh]

@cdrage I dont like that the categories spill over onto two lines instead of one. A reduction on the font size, a step down of what it is atm, would work and then have the padding be equal on the right and left of the categories - it'll matter most on the longest category. This will make it not look as squashed and be more breathable.

We could alternatively have an icon assigned to each category and have an option to only show the icons in the mini menu if the user wishes for more room. This could be something we could bring to AI Lab too if the menu concern is also there @axel7083

Or a collapsible menu that the user can hide?

[cdrage]

@cdrage I dont like that the categories spill over onto two lines instead of one. A reduction on the font size, a step down of what it is atm, would work and then have the padding be equal on the right and left of the categories - it'll matter most on the longest category. This will make it not look as squashed and be more breathable.

We could alternatively have an icon assigned to each category and have an option to only show the icons in the mini menu if the user wishes for more room. This could be something we could bring to AI Lab too if the menu concern is also there @axel7083

Or a collapsible menu that the user can hide?

I believe the discussion on the icon + text showing could be related to https://github.com/containers/podman-desktop/issues/9191 as well, although that issue is the main nav bar, maybe we do the same for the second inner navbar?

Any way you can mock up the reduction in font size / padding that could produce something smaller / more whitespace?

[ekidneyrh]

@cdrage I think bringing the font size down to medium and adding the left padding to the same as the right plus the width of the selection bar, reduce the header from 2xl to xl as it looks a bit large comparatively and then reduce that gap between the header and the menu items to 1rem (same as top padding)

[cdrage]

@ekidneyrh @deboer-tim @benoitf

Let's continue discussion here before I open up a 3rd PR haha.

From the discussions it looks like instead of making Kubernetes smaller, all submenu's / subnavigations should be smaller?

IMHO I do agree that the font is massive / whitespacing compared to the icons that we use.

@ekidneyrh what about:

• 180px wide (vs current 225px)
• text-md rather than text-lg, which makes more sense since "headers" are usually lg / xl.

Similar to this screenshot:

@feloy @axel7083 @jeffmaury does this also work okay with AI lab? Makes sense to have it a bit smaller too due to the amount of options, etc.

[ekidneyrh]

@cdrage Yah that works. Do we want to keep in the white space underneath the heading?

[cdrage]

@cdrage Yah that works. Do we want to keep in the white space underneath the heading?

I think so, I believe AI lab uses an icon on there too, so makes sense to have the white spacing.

Does this design work for you too @jeffmaury @feloy @benoitf ?

[axel7083]

Sorry for the late response @cdrage, if you are giving me the new values for the navigation bar I can put them inside ai lab to see what it would look likes.

[cdrage]

Sorry for the late response @cdrage, if you are giving me the new values for the navigation bar I can put them inside ai lab to see what it would look likes.

No problem! I'll be putting them up in a PR.

Consensus of UX call is to move forward with smaller font (font-md) and reduce the pixel width and then go from there in the PR regarding feedback.

[jeffmaury]

@cdrage Yah that works. Do we want to keep in the white space underneath the heading?

I think so, I believe AI lab uses an icon on there too, so makes sense to have the white spacing.

Does this design work for you too @jeffmaury @feloy @benoitf ?

I would love to test it live

[cdrage]

Sorry for the late response @cdrage, if you are giving me the new values for the navigation bar I can put them inside ai lab to see what it would look likes.

PR here #9325

[ekidneyrh]

closing as https://github.com/containers/podman-desktop/pull/9325 merged