Navigation button is hard to see

[christianlupus]

When looking at the current state of #1105, the navigation menu is reappearing again. See below:

When the navigation is expanded and the zoom factor is set correctly, the button might overlap with the edit (or other) button(s).

At least for me, this is almost invisible. I have seen this problem already in the past also with other apps on my mobile that the styling of the nav buttons might conflict with underlying content. Graphical example:

I am not sure if this is really an app issue or better suited in the Nextcloud style guides (as other apps are affected similarly).

[MarcelRobitaille]

I have noticed this as well. This is caused by @nextcloud/vue AppNavigation, and they don't provide a clean way to solve this IMO. I dislike many things about AppNavigation to be honest. I find the placement of the button over our own titlebar using position: absolute to be hacky. I think the close button should be inside the sidebar so that they can ensure good contrast and that it's not overlapping with the app's elements. I wish they would let us implement our own open button that we can position in a sane way using flexbox in our title bar and a close button that they position in a sane way in the sidebar.

As for a workaround, we could put an overlay over the app when the sidebar is open. Another gripe about the AppNavigation is that there's no good way to know if it's open. They document how to open and close it using event-bus, but I was not able to subscribe to those events after reading through the event-bus docs. Maybe we could hack something together in css with a sibling selector on app-navigation--close. However, the sidebar has 4 states: widescreen shown, widescreen manually dismissed, narrow screen hidden, and narrow screen manually opened. The sibling selector would only detect if it's closed or not. Maybe we could use a media query as well, but then we would have a magic number that could be changed upstream.

[christianlupus]

Yes, that is the issue. The problem lies in the Vue library, I see. This problem is only a minor issue at the moment. So, I would rather check for a solid solution before going into some hackery.

So, the question for @nextcloud/vuejs would be if a PR would be accepted/anticipated that will add emitting events to the AppNavigation component for showing/hiding the navigation component. If yes, I would suggest that we are forking the repo, add the code and create a PR.

[christianlupus]

Well, I was able to tap into the event bus. I will send you a PR.

[MarcelRobitaille]

Really? I just tested it again and I am not getting any events. Did you have to do anything special? I copied the same subscribe call as AppNotification and nothing.

[christianlupus]

See https://github.com/christianlupus/nextcloud-cookbook/tree/test/event-bus-open-navigation

[MarcelRobitaille]

What the heck. I was subscribing to toggle-navigation. I didn't notice that they were emitting navigation-toggled instead. Thanks!

[christianlupus]

Yes, the same happened to me. The trick is that with toggle-navigation you can simulate a clock on the toggle button.

[seyfeb]

There is a vue-devtools browser plugin which should record emitted events and might help detecting the event names!

[MarcelRobitaille]

The plugin has not been working reliably for me. Sometimes it shows up, but sometimes it doesn't recognize that it's a vue app.

[seyfeb]

I had this problem, too. Switching to a different browser helped with that. (I think the Firefox extension was buggy and Chrome worked well. Maybe the other way round)

[christianlupus]

Yes and no. Firefox is not working ATM. Chrome works well, but you need to do some steps in the right order:

• Make sure the dev tools are closed.
• Make sure, you have a dev build and force-relaod (Ctrl + F5)
• Click on the Vue symbol. A message will appear that Vue is not detected. Wait 2~3 secs then close the message popup
• Open the dev tools
• Be patient, it takes 1~3 seconds until the Vue tab shows up.

The problem is that here, the event-bus is used instead of plain old Vue events. These events will not be detected by the Vue browser extension.

[seyfeb]

Ah sorry then my comment was rather misleading 🙊

[MarcelRobitaille]

Thanks for the instructions @christianlupus. I thought it would "just work". Not sure why it was sometimes working because I never did all of that. I am getting stuck on # 3 though. I don't have any confirm button, just the message "Vue.js is not detected". If I skip that step, I don't get any Vue tab.