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

Work packages

• [x] https://github.com/nextcloud/calendar/issues/5121
• [x] https://github.com/nextcloud/contacts/pull/2711
• [x] https://github.com/nextcloud/mail/pull/6774

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

[paulcalabro]

I see this as well on NC v20.0.4

Mail App: seems a little crowded

Settings: overlaps an icon

Files: the toggle overlaps an icon

...probably other apps as well.

If it helps, my screen resolution is: 3440 x 1440 Let me know if you need additional info.

[ya-d]

I‘m feeling bad for complaining without being able to offer any help. But…

This really is a nuisance and is making Nextcloud feel unfinished and not quite ready for production IMHO. As there seems to be such an obvious solution I’m really puzzled there hasn’t been any progress for over one and a halve years.

Plus, this would also serve the the issue that essential tasks (creating new items) are hidden from novice users which might not know where to look for them.

[marcoambrosini]

As there seems to be such an obvious solution

This has already been solved in that exact way in files and deck. Whatever choice we take in talk, mail and contacts, I agree that this is making us look bad and needs immediate attention.

[ya-d]

While I clearly prefer the above solution, there is another proposal at the NC-Vue repository by @dartcafe, if vertical space is a concern. Losing horizontal space might be even more of an issue on mobile though. That issue nextcloud/nextcloud-vue#1414 was closed which is why I quote it here for reference.

Proposal: Give the navigation more space, move the toggle inside the navigation and leave 44px of the closed navigation visible: Open state Closed state In the result, It costs just 44px of the app container, but the app-container is again a fully usable square and the toggle is still usable.

[dartcafe]

I want to bring this back to attention, because I am annoyed every time, when I try to solve something. Is there any perspective that and how this issue is solved?

[skjnldsv]

Is there any perspective that and how this issue is solved?

Should be done by dev I think. Add "New xxx" button on the list to shift things down and avoid overlapping.

[dartcafe]

Not sure if I understand you right. You say, this problem should be solved by the app developers?

[marcoambrosini]

Not sure if I understand you right. You say, this problem should be solved by the app developers?

Yes @dartcafe, by making room for the toggle in the app content or in the appcontent list, depending on where the toggle happens to land. See talk, files and deck as an example. I think we should close this issue and open separate issues in the apps in which this hasn't been done yet.

[dartcafe]

This is not satifying. This is like creating a problem and leave the room to let other people search for the solution. Not every app has a fixed top bar. I.e the calendar app uses the total space of the app-content area.

I know that this not killer issue, but I was just hoping for a unique and centralized solution, ideally served by the navigation bar where the handle belongs to.

From a user's perspective, it looks not really unique. Some apps have the handle inside the top bar, some apps leave just free space to the left or the top, some just don't have the handle and others have the overlapping issue (including featured apps).

Maybe a topic in the style guide can give an approach to help app developers take a unique approach.

[marcoambrosini]

I understand @dartcafe, as far as I'm aware the only solution coming from the vue lib would be a permanent column taking away 44px from the width of the window to house the toggle and probably some other functionality. Though that is a huge change and would require quite some thinking. IMO it wouldn't be justified but the toggle only. I get that the proposed solution is not completely satisfactory, but it's minimum effort for a massive gain in usability and aesthetics.

edit: hiding old proposal screenshot to avoid further confusion here.

[dartcafe]

This proposal is similair to what I proposed in https://github.com/nextcloud/nextcloud-vue/issues/1414 and the example above https://github.com/nextcloud/server/issues/16934#issuecomment-714348026 So I would of course prefer that. But I am fine with any other solution, which gives a good UX.

But my motivation as a developer is to have a solution, where I do not have to break my brain, how to do the design around this toggle.

From a user's perspective, I would simply expect identical behavior and apperance of standardized components.

And because we are in this context: There is a lot of talk about design, how many pixels a button should have or if icons should be 24 or 26 pixels. But where is the UX talk? I hope I will not be misunderstood: Standardized design is essential for a good UX and these pixels discussions are more important as they seem, but there is more what defines UX.

For example: How should the navbar behave in all apps.

But I am drifting away. 😉

[ya-d]

This is not satifying. This is like creating a problem and leave the room to let other people search for the solution. Not every app has a fixed top bar. I.e the calendar app uses the total space of the app-content area.

Great to see this issue being tackled! 💪 Thanks! [edit] I first stated there’s a "safe area" for the toggle in 22.2. That’s bullshit of course. I applied a CSS hack on this instance and forgot about it… Sorry.[/edit]

I agree that design guidelines should be updated accordingly. My impression is that (almost?) any app has or could have a top bar. The next logical proposal would be to move the main action button and view controllers there too and leave navigation exclusively for navigation elements (plus settings).

[marcoambrosini]

Issue transferred to groupware because that's where it is most present still. So for now it will be responsibility of app developers to make room for the toggle. The suggested solution is to use a top-bar like in talk, deck and files. At some point it would probably make sense to have a top-bar ported to the vue library I guess.

So next items are:

• [ ] Add info about how to handle this in the design documentation; opened issue here
• [ ] Fix toggle overlap in Calendar
• [ ] Fix toggle overlap in Mail
• [ ] Fix toggle overlap in Contacts

[dartcafe]

Appstore has the same issue.

[AndyXheli]

@marcoambrosini There's also an issue on the below, I'm running on NC 22.2.3 do you want me to create a new issue ?

[marcoambrosini]

@andyxheli this is not related to the navigation toggle, but yes please! You can goa ahead and open an issue about the copy link and sharing buttons in the server repo :)

[AndyXheli]

@marcoambrosini Thank you!

[Valdnet]

You should also take into account this reported issue with the application list and implement according to this idea: https://github.com/nextcloud/server/pull/31080#issuecomment-1033750024.

[reos-rcrozier]

What about a solution like this. The menu button is made very thin and made part of the menu sidebar (or really a separate div or whatever it is that can't actually contain any content from the menu), and the menu only collapses to the thickness of the button. You permanently loose the thickness of the button from the available space, but it will work for any app.

[Hrishkesh]

Hi there, I'm facing a similar problem over toggle menu overlay as I attach the screen shot below. I'm using my app called VDPP as a plugin it worked well for the version 20.0.2 (left side of the image) and there is a toggle menu overlay for the next recurring versions like (21.0.9) .

Also I tried to adjust the parameter called padding as indicated in the screenshot, then it works fine for the time being.

As I see, is the problem with the nextcloud or my app ??

@tcitworld @jancborchardt

[tcitworld]

Reopened for calendar & contacts

[jancborchardt]

This has been fixed nicely with Nextcloud Hub 3 (25) already in both Mail and Contacts:

[ChristophWurst]

Not for Calendar

[st3iny]

I'm afraid there are only two ways of fixing this for calendar:

1. Increase header height to accommodate for the toggle button (~44px so we need 52px for the header). This has the disadvantage of reducing the available vertical space for the calendar grid.
2. Decrease toggle button top margin (and height) to make it fit in the existing grid header. This won't affect the vertical space of the calendar grid but will break visual consistency with other apps as the button is a bit higher (and narrower).

[dartcafe]

IMHO this toggle should still not be positioned inside the app container.

In the end the positioning problem of this toggle is just delegated to every app developer.