Left Navigation redesign

[mklanjsek]

Growth of Octant plugin ecosystem and recent UI features like #1341 are urging the need for redesign of the Left Navigation. The main problem we are trying to solve is:

• Vertical Navigation doesn’t scroll when collapsed. We need to be able to show more items in that list or divide the items into smaller groups.

Describe the solution you'd like
Left Navigation can accommodate large amount of items without using too much screen real estate. Navigation should still support both collapsed and expanded state to satisfy the needs of both novice and advanced users.

Anything else you would like to add:
This is intended to be a main issue to track the redesign. Please add any additional problems of current design, feedback and ideas how to improve it in comments below.

[mklanjsek]

Here is the last in series of prototypes I created to address this issue:

Based on discussion from today's community meeting (link), the next iteration will be mix of two above modes:

• there will be tab control on the left with all groups (modules) like in collapsed view in above gif,
• the list of items for each group will be by default expanded, like in expanded view above,
• we should try to eliminate or minimize the collapsed/expand slider,
• the left column with groups should have overflow flyout in case we can not fit all groups inside the current view,

[mklanjsek]

Here is the latest prototype based on feedback from yesterday:

For everyone who would like to play with it, code is here (note: it's still on prototype level)

[wwitzel3]

I love that, I think the plugins that are acting as modules are on the wrong level though. I would expect a plugin acting as a module to have a large Icon, I'd also expect Applications (/workloads) to have it's own large icon.

Anything acting as a unique Octant Module. (/workloads, /overview, /cluster-overview, /jx, /sample-plugin ...)

[mklanjsek]

Thanks @wwitzel3!

Module structure is same as before. Besides, I do not see that level of module info inside the data coming down to client. How can client figure that out?

[mklanjsek]

Here is a quick recording of the latest prototype, @vmware-tanzu/octant-reviewers please let me know what you think before I fix a few remaining issues and submit the PR.

Note that navigation collapsed/expanded state is now available only through shortcut (will be added to preferences soon). Also, newly added Description field is wrapped up inside the card for better visibility. In the last part of recording, I illustrate how selection is handled with the Url change.

Feedback, please!