Side navigation for apps

[kra-mo]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
On smaller screen sizes and especially those with 16:9 aspect ratios, the top app navigation bar takes up a lot of space, which is a problem because:

• The system can have 1-2 horizontal bars
• The browser can have 1-3
• The apps themselves can have 1-2

Describe the solution you'd like
What if we used the Material navigation rail pattern?

(The order and placement of items is very much to be decided.)

Additional context
There would also be other benefits to this pattern:

• Text and icons don’t shift around a lot while hovering
• It is more clear which navigation item is selected
• There is a consistent left-to-right navigation pattern across the software

There are also some downsides:

• For instances with lots of apps, 4-6 less fit in the navigation, depending on screen size
• There is less space for the branding logo
• It does not work on very small screens, so mobile would have to be special-cased, as the Material guidelines recommend

We would either have to find a way to blend the background in somehow (like I tried here, but probably something more realistic) or instance admins would need to change backgrounds so that there is clear space on the left instead of the top like there is now.

It was mentioned that navigation in openDesk products is usually top-to-bottom, but there already some exceptions, such as Element, which uses the same LTR pattern.

[susnux]

Potential problem could be the UX for the "right menu" which is now on the lower left of the screen.
This is especially on desktop a quite uncommon position for often-used things like the search, the menu toggle and the contacts.
Most content is centered on the screen so the hot spot of interaction is the center + the browser navigation (tabs), meaning now you have to move focus and interaction from the hot zone to a part of the screen that is rarely used.

[kra-mo]

Potential problem could be the UX for the "right menu" which is now on the lower left of the screen. This is especially on desktop a quite uncommon position for often-used things like the search, the menu toggle and the contacts. Most content is centered on the screen so the hot spot of interaction is the center + the browser navigation (tabs), meaning now you have to move focus and interaction from the hot zone to a part of the screen that is rarely used.

Yeah, I said placement of items is very much to be decided because I do think there are better options. I just mirrored how it is now, but we could (and should) very much reorder things. In a previous mockup, I put search at the top, but for this iteration, I just mirrored what we already have. I think getting to know what of these people actually use and how often would be valuable.

[ChristophWurst]

It does not work on very small screens, so mobile would have to be special-cased, as the Material guidelines recommend

Does that mean mobile keeps the top navigation?

Just curious as someone who uses Nextcloud in the mobile browser occasionally.

[juliusknorr]

One convern, for the labels we have even less space then, longer app names like Collectives, Analytics, Dashboard would probably not be possible to show without cutting off

[solracsf]

@juliusknorr maybe expanding to the right on mouse hovering the icon?

See also this app for some ideas:
https://apps.nextcloud.com/apps/side_menu

[susnux]

maybe expanding to the right on mouse hovering the icon?

I then fear too many left side menus:

1. The app menu
2. The in-app menu we have already (e.g. files views)
3. Second level sidebar like in Collectives