Use Multi-Column Layouts

[yordis]

As of today, the main menu is long enough where it sometimes it doesn't fit horizontally, and with custom pages I suspect it will become a bigger issues.

Proposal

Move to Multi-Column Layouts, I took the name from Tailwind: https://tailwindui.com/components/application-ui/application-shells/multi-column. It looks something like the following:

It would be something around the lines of (just making it work statically, and ugly):

Benefits

1. Vertical scale allows you to keep adding more menu elements without having issue with scrolling since vertical scrolling is easier than horizontal one when you have many items, here is a good reading: https://uxmovement.com/navigation/the-fastest-navigation-layout-for-a-three-level-menu/
2. More space for the main content in terms of vertical spacing.

Drawbacks

1. In Mobile layout, it would require adding a hamburger menu, therefore users are required to take two actions.

[josevalim]

Yes, this is something we want to do, but I think it requires a more throuogh redesign than moving the column around, unfortunately.

One open question for the future is if we are going to have a catalogue for LiveView components and if it should be part of the dashboard. And by this time we will probably redesign it, but no immediate plans for now.

[yordis]

@josevalim got it, also, note on this implementation detail, are you open to use Tailwind? I cut myself replicating the same classes so I dont to repeat in the HTML, so I am generally curious about the topic moving forward

[josevalim]

FWIW, we have decided to keep the catalogue separate from the dashboard. There is also a request for night mode on #343. We should probably have a redesign!

[chrismccord]

We would love someone to take this work on. To brand a dashboard 1.0, we need a few things:

1. modernize the component system we have with function components
2. rewrite layouts with tailwind, consider dark mode, and potential multi column as in this proposal

@yordis if you're interesting in taking this on, please let us know. Thanks!

[yordis]

@chrismccord. Do you have some design done, or do you prefer to do incremental updates and eventually get to "happy land"?

[josevalim]

For what is worth, we already modernized the component system. So dark mode and potential multi column layout are the pending considerations. It is also worth mentioning that we cannot move to Tailwind, as that would break existing components.

We would be open to dark mode too, as long as it works transparently (which seems to be Bootstrap promise), but that would require updating all built-in components (and that is non-trivial amount of work).