Add touch slideout menu for mobile

[maxpoulin64]

Implements #393 with a slightly modified version of the demo solution I had. The only problem with it that I'm aware of is that the transition is fixed, so if you're like me and swipe the slider really fast it feels laggy when you release the finger as the animation still plays at normal speed. I didn't feel like implementing the maths to support inertia, but if that's bugging too much people I will add it.

[dgw]

I believe @astorije himself would say it's better to add this and improve it later if necessary than try to get it perfect before merging. 👍

[xPaw]

Trying this on desktop and there's a bug with the menu being a little buggy:

1. Resize the window so that the menu hides
2. Open the menu
3. Resize to higher resolution, the sidebar will now re-appear

---

It looks like it is not possible to open/close the menu while on the login window.

---

When you tap something in chat view (to close the menu), it still triggers the click on whatever you tapped (e.g. if you tap on a nick, sidebar closes, and it executes a /whois)

[maxpoulin64]

@xPaw:

1- I semi-fixed it, but master does that as well in an even more silly way (at least for me). It's hard to fix due to the way we do the menu (we actually put the menu with left: -220px and slide the whole viewport 220px instead of changing the absolute position of the menu itself). I can disable animations when going into desktop mode because the menu is never animated, but I can't easily disable it for when we transit between desktop->mobile.

2- Good catch, fixed

3- Semi-fixed. Since every window have its own menu button for some reason, by the time we get the event to fire on #viewport it's already clicked so I can't do much better than disabling pointer events on .messages :/

[astorije]

@maxpoulin64, could you rebase this with master please?

[maxpoulin64]

Sure, will do tomorrow or saturday as soon as I get a chance.

[maxpoulin64]

@astorije: done, pretty minor conflict.

[astorije]

We might want to switch to a dedicated dependency for that later, but it will do until then. 👍

[astorije]

If @xPaw or @williamboman or @MaxLeiter want to give it a try, I think this is ready to go 🎉.

[williamboman]

I ran this for quite a while before the first 2.0 rc and it worked great then. Gonna update my instance to run latest master + interesting PRs (including this) again.

[MaxLeiter]

I really like the change, but it feels a little too fast. Could we make the transition a little longer?

[MaxLeiter]

From IRC

21:28 +Max-P Hmm yeah, I made it quite fast because it otherwise feel a bit weird when doing a quick swipe
21:29 +Max-P I'll make it a bit slower, can't make it too slow but I certainly can make it slightly slower.
21:29 +Max-P It's not just a gesture, you can actually drag it however you want, that's why I had to make it that way
21:35 MaxLeiter well when you open sidebar and tap anywhere, it closes
21:36 MaxLeiter that felt too fast, the dragging part was fine, but I assume those are the same value?
21:36 +Max-P Yeah
21:36 +Max-P Basically what happens is after the gesture, the end result is calculated and it snaps to either open or closed
21:36 +Max-P So it's the same (CSS) animation that finishes it
21:36 +Max-P But yeah I'll probably split them into two, or calculate it in JS and set it in style

[astorije]

I'm in favor of shipping this now and improving later. It's not like it's broken, just it could be slightly improved. What do you think @MaxLeiter?

[MaxLeiter]

Fine with me, @astorije