Material: Draggable sidenav

[tam3r]

Is it possible to make sidenav draggable? Not only google apps like gmail and play music demonstrate the approach, but also MD bottom sheets.

It feels more responsive that way and would be an appreciated enhancement.

[andreabadesso]

+1

[ThomasBurleson]

@tam3r - what about the other UX questions.

• Bottomsheet - How high should the bottomsheet be draggable? Why? What about snap-to when released?
• SideNav - Swipable I understand; why do you want this draggable?

[tam3r]

Bottomsheet looks good as is (to me at least). Not sure anything needs to be changed in terms of how far it can be pulled.

"Draggable" may not be the best word to describe how it is in native apps. I meant that it may be a good idea to let the sidenav position follow a finger position. When the menu is closed, any touch that starts on the left edge of the screen and lasts for like 300ms or longer makes the right edge of the sidenav appear. Sliding to the right side makes the sidenav move along with the finger. If the finger is released before the 50% of the menu width is reached then the sidenav slides back out. Otherwise it opens to the full width. It does not go any further than full width of sidenav though.

With the sidenav open swiping horizontally towards the left side of the screen makes the sidenav slide out along with the finger. Again, if the finger is released before the sidenav is half-closed then the sidenav slides back. Otherwise, it slides out.

To me, that kind of behavior feels more responsive and "native". As far as I remember there have been requests for "slide from the edge to open a sidenav" feature, so that's killing two birds with one stone.

[rdesimone]

I agree to @tam3r - (most of the sidenavs in JS frameworks are not implemented native like). There is another issue: when opening the sidenav with a swipe actually, the swipe event has to be attached to the view (content). In the case the swipe event is needed for another task (e.g. view change, swipe events on list items), the swipe event might not be available. Maybe a small element overlaying the content at the left (or right) border could be used to attach a swipe/touch event and to initiate the opening of the sidenav.

[gustavohenke]

I've suggested a review in #1890, which for me looks very similar to this one.
So, :+1: for what has been proposed here.

I've been implementing native-like swipe gestures in my app and it's rather complex. The community would benefit a lot if this was implemented in the ngMaterial core.

[rdesimone]

@marcysutton maybe take also a look at the core-drawer-panel from the Polymer project https://www.polymer-project.org/0.5/docs/elements/core-drawer-panel.html

[ThomasBurleson]

@rdesimone, @gustavohenke - agreed this will be a great feature. The team likes it... we have many other features to deliver first; which is why this request is in the backlog.

[NickBolles]

This might be nice to include on the md-swipe-* directives. It might work a little differently and be another issue though.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[williamoliveira]

So this feature was essentially done, it had a pull request and now has been killed because of a new version that will take months to be released?

[marco-silva0000]

what is the status of this?

[devversion]

We are hoping to re-address this after #9362 is available.

This makes sure that there are no regressions with content inside of a draggable sidenav.

[WillsB3]

I see this has been re-opened for a while now.

Is there anything I can do to help the process of getting the existing PR merged?

[Splaktar]

Closing as duplicate of https://github.com/angular/material/issues/35.