feat(sidenav): add gestures to sidenav to allow dragging the sidenav

[devversion]

I'm currently working on the feature, which allows to drag the sidenav.

Fixes #1591 Fixes #35

[EladBezalel]

element[0].offsetWidth won't work better?

[devversion]

That won't work, because the sidenav is hidden, that's why offsetWidth doesn't work

[devversion]

@EladBezalel Would be great if you test the provided demo 😄

[JumpLink]

I've create a module that replaces the original mdSidenav with the version of this pull request for testing:
https://gist.github.com/JumpLink/cd2b4188a54ec3f4cc7a

[devversion]

Thanks for your work @JumpLink, but I think we should test my PR with fetching the current patch (https://patch-diff.githubusercontent.com/raw/angular/material/pull/6174.patch).

There is also a nice demo from me, so you only need to build the docs.

[EladBezalel]

@devversion I tested it locally and it feels a bit weird, i assume you based on the bottom sheet code.
Bottom sheet feels more user friendly (take in account the swipe acceleration etc..)

[devversion]

What do you mean?
I recorded it with the Chrome Dev Tools and there was a constant fps rate for the animation. It should drag similar to the bottom sheet. Please provide me more information

Here a little video

• https://www.youtube.com/watch?v=NAqCp5cjz5c&feature=youtu.be

This even works on Android and IOS perfectly (smooth and user friendly)

[EladBezalel]

I mean, bottom sheet have this extra space to be dragged to, also as i said, swipe the bottom sheet down real quick and it will be dismissed..

[devversion]

But that makes no sense to add extra space to a sidenav (as we can see for example in the Android API 23, there was never a extra space for dragging. This will create more issues with the width of the sidenav. And the bottom sheet will close itself after dragging it a few pixels down. That shouldn't be implemented in a sidenav too.

[EladBezalel]

OK, about the width i can agree with you, but as i mention earlier bottom sheet calculate the drag acceleration and dismiss if its was a fast swipe and it should be also on the sidenav (take a look at the google store sidenav)

[devversion]

@EladBezalel can you test the swipe acceleration? :)

[EladBezalel]

@devversion sure, later today I'll take a look!

[devversion]

Great, thanks for your time!

[EladBezalel]

wrap with brackets
also can be:

var distance = lastDistance - ev.pointer.distanceX;
isQuickDrag = isRightSidenav ?
              distance <= -accelerationBound :
              distance >= accelerationBound

[devversion]

I will use brackets ;)

[EladBezalel]

I would also change the right sidenav to be non-draggable cause the first button is left sidenav and it's in the dragging demo so it's the first button to press..

[ThomasBurleson]

@devversion - what is the status of this PR? It appears outdated ?

[devversion]

@ThomasBurleson It is not outdated - I will rebase the next days.

We can better say, it's currently blocked - because once this feature is landed, the siidenav will not allow scrolling for iOS anymore.

This is caused by #7311 and a fix is already pending #7857

[devversion]

FYI: This PR will be deprecated and re-submitted, once #7857 has landend.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting.