Handle too many items in navbar

[benoitf]

Is your enhancement related to a problem? Please describe

the navbar contains too many items for the default min-height that we have

if there are too many items to be displayed, buddy icon and settings icon should always be there but we should hide the previous icons with a ... and with either our custom dropdown (like Slack for example) or a menu (like VS Code). I would opt-in for dropdown but it looks like there was a problem when wanting to use it for the buddy dropdown

To mitigate the issue we could reduce the vertical gap in each icon of the navbar from py-3 to py-2

Describe the solution you'd like

quick & dirty: reduce py-3 to py-2, reduce icon size proper handle: hide top items and display ... / more options while bottom icons should always be visible (never hidden)

Describe alternatives you've considered

No response

Additional context

No response

[deboer-tim]

Since it's an IDE I typically use a near full-screen window for VS Code, and it has 8 nav items without any extensions. I typically use Podman Desktop at 60% of that size, and we'll now have 11 in the default configuration. Without changes the first installed extension would be visible, the second would be hidden.

We should absolutely do the ..., py-2, etc., and that will squeeze a couple more in and make it work better for now, but IMHO our core problem is that we have too many items in the nav and keep adding more. It looks cluttered, it's time to remove a few options or look at other options.

[benoitf]

commented there https://github.com/containers/podman-desktop/pull/6777#pullrequestreview-2006945794 that we could also reduce the width of the navbar

[ekidneyrh]

Just adding my thoughts here ahead of the UX call today.

Since we have modelled the nav bar from VS code, we can have a look and see what they are doing:

You can right-click an empty space on the nav bar and then select what icons you want pinned in the nav bar. If right-clicked over an icon, an additional option to ‘unpin’ will appear.

Benefit of us doing the same: developers using podman will notice the similarity in VS Code and will know to right-click to do this.

Downsides would be users that are not familiar with this layout might not know how. We can work around this by also having the option to pin/unpin to the nav bar through the extensions tab.

We need to decide what items should be there on install / by default. What is podman for initially without the extra features? What are it’s basic functionalities? We can keep this to 6 or 7 as that’s the amount of information a user can hold in their short term memory.

I think what I have in the mock-up above works:

• Dashboard
• Containers
• Pods
• Images
• Volumes
• Extensions
• Settings

The user can then add in new extensions as they normally would, and then it would appear in the nav bar. I would get rid of the inset for this route as it would get too complicated. Just have them slot in at the end of the row. Set a max amount of pinned items to 10?

For the coloured icons, we can get monotones ones so they fit in with the rest of the icons.

[deboer-tim]

Some thoughts:

• At minimum height we can maybe get 10 items in, but if you have a taller window you could do more. Instead of a specific limit, maybe we do the same thing as VS Code and use a ... menu for anything that doesn't fit?
• Kubernetes is 5 items and 1 more on the way. I think you're suggesting getting rid of nav groups above (which I'm good with), but to me it feels like you wouldn't want to automatically add all 6 by default nor individually add/remove. To me it feels like we're going to have more items in general than VS Code and need something a little more to find & manage them.
• For the last item, maybe a way to add items to a secondary or 'not as frequently used' menu? e.g. Other Kubernetes.
• IMHO extensions like AI Lab should be able to contribute multiple nav items instead of one. This would allow it to be 'first class' in the nav and take advantage of everything above, but also adds to scale issues.

[ekidneyrh]

The max number of item was a suggestion, so I would be good with having anything extra under a more menu etc.

For the Kubernetes stuff, could they be grouped together within the catalog? Would there be a use case for all of them to be downloaded and added together, or can they be separated?

I think a 'not as frequently' used menu could be that more menu mentioned above with the items that down fit in the nav bar. Have the user be able to re-arrange the items in a preferred order, so the less used one can be grouped in such menu.

WDYM by multiple nav items? Like how Kubernetes has multiple items? I think having that within the AI Lab extension is best, as it has its own navigation menu within it and keeps it contained there. This could also be done for Kubernetes - have an additional navigation menu within that item and keep them contained and grouped together that way.

[axel7083]

Here is some examples from Jetbrain navigation system. They recently (1-2 years ago) started a very big revamp of their UI to simplify it, and improve the way developers uses it.

Submenus

I really like the keyboard shortcuts

Moving icons

They are a separation in the navigation bar, and you can move those item

Right click on an icon in the nav bar

When Show Tool Window Names is enable

Top and bottom items

Scalable

https://github.com/containers/podman-desktop/assets/42176370/dd174657-c603-40b3-85ea-f14fd4f36514

Recent item

When an item, which is in the ... is selected, it get on the navbar, until a new one is opened

[ekidneyrh]

Discussed this during our UX call 20/06/2024

Have the ability to customise what icons are on the main nav.

The user can pin them as I've done in the mock-up below:

You can right-click an empty space on the nav bar and then select what icons you want pinned in the nav bar. If right-clicked over an icon, an additional option to ‘unpin’ will appear.

For the overflow of items, have them below a '...' menu

such as the example Axel gave above:

Get rid of nav groups and have a single nav group item instead

with a submenu that follow the pattern of AI Lab.

If the user wants they can add an item from the submenu to the main nav eg Deployments from Kubernetes. This can be done through a similar process as above; right click and have the option to pin.

Icons from extensions to match monotone style of default icons

Speaks for itself, have the icons be in one colour to not look too different from the others.