Admin Panel Sidebar Redesign

[cschieder]

Why?

As more points get added the structure is becoming unclear

Solution:

Section the sidebar into overarching topics

Comparison Sceen:

Implementation/Design Details

https://www.figma.com/file/dJQKgUPzIDND36o2Nq8dct/Loodse-UI?node-id=7679%3A81835

With the changing of the structure I propose moving this section of the "Interface" point

To Defaults and having Custom Links & the Display API Docs etc part of "Customization"

Minimized Version

https://www.figma.com/file/dJQKgUPzIDND36o2Nq8dct/Loodse-UI?node-id=7758%3A98874

TLDR

the comments below are about the minimized version ^ the one above is the one that should be implemented, no need to check the comments below.

[KhizerRehan]

Any thoughts on this collapse section for Admin Panel sidebar?

https://user-images.githubusercontent.com/17727069/190964323-2fa4210d-01af-463f-8dc7-939045912ed0.mp4

cc: @cschieder

[KhizerRehan]

Just to add i think following ticker issue is same what i have discussed above: https://github.com/kubermatic/dashboard/issues/3468

cc: @cschieder @Waseem826

[cschieder]

Good point, some drafts - 1. is my favorite, thoughts?

1. Shortening and truncating

---

2. Dots (works without the collapse arrow too, the icon will simply have collapse behavior)

---

3. Abbreviations/shorthands

[KhizerRehan]

I have a suggestion can we add a popup and show complete name instead of Shortening and truncating wdyt?

see this

We can do for this Admin Panel.

[cschieder]

That works for me too

[cschieder]

Drafts for popup @KhizerRehan

[KhizerRehan]

@cschieder can you share Dark version too

IMO, 2nd, 3rd both are fine as they doesn't disrupts layout or hide icons underneath the popup for other icons below in nav sidebar

[cschieder]

The thought for 1 was that it pushes the other icons down but that would probably be a hassle to do any be a bit odd for usability so lets scratch that

Dark Theme

[cschieder]

One more variant