Server: Mobile menu toggle for navigation overlaps with content (especially in Mail & Contacts)

[tigernero79]

mail application in the mobile version from this annoying overlap of the 3 lines that make the menu open with the first readable email.

I attach screenshot

[ChristophWurst]

Yep, it's hard to star the first message then.

cc @skjnldsv because this also affects any other app that uses the app content list with a star icon

Please use the bug template for bug reports next time. This makes it easier for us to triage and understand reports. Thanks.

[skjnldsv]

Yeah, i had no idea so far, we have the same on contacts :)

[ChristophWurst]

Yeah, i had no idea so far, we have the same on contacts :)

A problem shared is a problem halved.

Maybe we can find a better design for this. Any ideas @nextcloud/designers?

[jancborchardt]

Yep, this is a problem in lots of places, especially in the apps using the app-content-list (Mail and Contacts as you said). The menu toggle was always an afterthought so far, and we should fix that.

Here’s 3 proposals:

1. Half menu icon: This is how it _used to be_ in Android. Not the best solution as people don’t see the menu icon and … what should be the clickable area? No wonder why Android moved away from this.
   
2. Menu + logo: Moving everything in the header over to insert a menu icon. This is a compromise still showing the logo, but will take a lot of space out of the header for icons. And well, there’s already so much stuff in the header.
   
3. Menu, no logo: Basically replacing the logo with the menu icon. This is of course the harshest because the logo will not be shown at all on mobile. But since the logo duplicates the primary app shortcut (in the default case Files) you could say that is ok.
   

---

A middle ground we could go for is 2+3 depending on screen size. That is on tablets the logo would still be shown, but on smartphones not. Remember this view is only for the mobile web interface when you are logged in, so we kind of assume people use the mobile app, and do not necessarily need to see the logo.

Another addition to option 3: Since the menu icon is in the header, the navigation could open full-height and show the logo in the top part, just like we do in the Android app.

Any other ideas? And what do you think @nextcloud/designers?

Also cc @karlitschek @jospoortvliet since this is related to our branding.

[jancborchardt]

Transferred to server repo as this is problem is more universal than just Mail.

[karlitschek]

Hmm. I'm not a fan of the proposals. Sorry. From an information hierarchical perspective the menu icon is part of the app. Not the header which is only a way to switch between apps. Also we shoild have our logo somewhere because it is the only place where we can show it. And together with the menu icon is looks crowded. I still think it should be somewhere in the app area.

[jancborchardt]

Since it’s mainly an issue with the Contacts and Mail apps, here’s another proposal:

• We actually make space for the menu icon in the content area, moving the first content further down.
• The "New message"/"New contact" button can then also go to the top of the list of messages/contacts instead of the top of the navigation.
• This moves it more in line of how we do it in Files with the "+ New" button being in the main content area, not in the navigation. Especially for Contacts this then also creates Contacts where they will appear, directly on top of the list.
• On mobile, this makes the action directly available without needing to open the navigation.
• When scrolling, the menu and "new" elements could scroll out of view, to appear immediately whenever you scroll up a bit. Kind of like we do it on our website with the navigation.

In Contacts app cc @nextcloud/contacts

In Mail app cc @nextcloud/mail

What do you think @nextcloud/designers? Other proposals?

[skjnldsv]

I'd say after all the hassle we had to standardise the new button in the navigation (used everywhere now: contacts, mail, calendar, notes, users management, quick notes...), removing it after 2 major is very confusing :)

@christophWurst you had the idea of a dedicated entry to refresh the mail list, wouldn't it solve your issue?

[skjnldsv]

@karlitschek since this would be for mobile view only, I still think it make sense to replace our logo with the sidebar menu.
Our android and iOS apps doesn't show the logo in the header either? What do you think?

Our desktop would still show the default logo like it currently is :)

[karlitschek]

Hmm. I think it is ok to do it on mobile only because of the limited space. But isn ´t it strange to have a different structure if the browser shrinks?

[skjnldsv]

I'd say we already have a different structure on mobile as we show less information on the file list, we don't show the navigation... etc.
I'm sure we can find an ideal solution here :)

[georgehrke]

Related issue about always showing the hamburger menu: https://github.com/nextcloud/server/issues/15831

[jancborchardt]

We just talked about it in the weekly design call, and will do that again next time. Some notes:

• The overlap is mainly an issue with 3-column layout apps like Mail and Contacts
• We need to keep in mind the request to always show the hamburger menu as @georgehrke mentioned above, that is also on desktop
• With that style, the first mockups with the hamburger menu in the header would not work so nicely
• The Deck app has it shown permanently on desktop already and it works quite nicely

We will discuss it again in the meeting next week @nextcloud/designers. If anyone has some ideas please start the mockup machine so we can weigh benefits. :) From my side the proposal is still https://github.com/nextcloud/server/issues/16934#issuecomment-526664888

[jancborchardt]

We talked about this during the design call today and agreed (@juliushaertl @ma12-co @skjnldsv and I) that we’d do it like described above with keeping the hamburger menu where it is right now, moving the "New" buttons and shifting the start of the list down a bit.

Something we need to look into is how we do it in the Calendar app. If at some point we have continuous scrolling, it will essentially be a non-issue though. cc @georgehrke

From comment above https://github.com/nextcloud/server/issues/16934#issuecomment-526664888

In Contacts app cc @nextcloud/contacts

In Mail app cc @nextcloud/mail

[stefan-niedermann]

Might be relevant for the Notes app, too: https://github.com/nextcloud/notes/issues/392

[jancborchardt]

@stefan-niedermann the issue you linked is actually a bit different, and in fact a bug with the menu handling. :) Thanks for referring it though, I transferred it to the server.

[tigernero79]

@jancborchardt @skjnldsv

the problem also exists in the mobile application section model

[skjnldsv]

@jancborchardt sicne we changed a bit the design specs to go for the search/new button like talk now, could you do some mockups or detailed specs on how it should look like now?

Once we go in mobile mode, we just slide the search/new buttons combo on top of the app-content? And put them back in their location if the navigation is opened? Any transitions you have in mind?

Thanks :)

[jancborchardt]

sicne we changed a bit the design specs to go for the search/new button like talk now, could you do some mockups or detailed specs on how it should look like now?

The only thing that’s changed is search, and that’s on the top of the navigation. Regarding the "New" button for the 3-column layouts, the last proposal still stands.

Once we go in mobile mode, we just slide the search/new buttons combo on top of the app-content? And put them back in their location if the navigation is opened? Any transitions you have in mind?

The position will be the same regardless of mobile or desktop, anything else would be confusing and require special cases to maintain.

[BRadHoc]

Im experiencing this on ipad

[jancborchardt]

@BRadHoc that seems to be a different problem, could you open a separate issue with more info about this? Thanks! :)

[brylie]

I think this sidebar menu should not "float" above content. Instead, it should be an inline element, that allows other content to respond when it resizes. That way, there wouldn't be any issue with the hamburger icon overlapping or, relatedly, the menu interfering with input on the primary content area.

[brylie]

Here is an example where the floating sidebar obstructs the Create Contact form, with no way to hide it (the hamburger icon actually disappears).

[brylie]

Below is an example of how the sidebar could behave. Rather than obfuscating content, it simply uses the natural behavior of the browser to resize neighboring content as it expands.

https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1

[brylie]

Note also that on a large screen, the Nextcloud sidebar actually behaves as described above. The sidebar is displayed inline and pushes the content aside as it expands.

So, my suggestion is to preserve the large screen behavior on medium-to-small displays.