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).

[yordis]

I suffered yesterday without Tailwind 😭 I forgot how much work requires trivial things; it is a highly productive tool and effective from my ~4-5 years of experience.

Could Tailwind use a different prefix and keep the existing CSS? I mention it because if you want TTailwind, I applied such a strategy before to avoid breaking changes and take advantage of it.

[josevalim]

You can bring tailwind for your own pages, but it probably doesn’t make sense for us to support two tools here, given we need to maintain compatibility.

[SteffenDE]

@josevalim well we're still pre 1.0, so we don't have to maintain compatibility, but it would of course suck for custom pages that rely on bootstrap classes.

[yordis]

With Tailwind, I am eager to contribute. I have done these layouts for the n-time by now, and tools like v0 are trained on them, so I can leverage all of them to be as effective and productive as possible.

Anyway, for now, if you have some designs done, that would be great, otherwise, I can put something together as I asked before and continue improving.

[josevalim]

I know we are pre-1.0 but this is such as massive breaking change.

Also, how would tailwind classes even work in this case, since they are stripped down based on use? Each project would need to reproduce our Tailwind config and generate their own CSS, no? And shipping all Tailwind classes is probably too much. Something like Bootstrap may be a better fit anyway?