Open menu on right swipe

[Nasicus]

I have the following situation:
I have an existing project which already has a responsive-design. But one feature it's missing, is to open the menu on "right swipe" (on the moment you have to click on the burger).

The page is structured quite "normal".
So what I tried to do is to replace one of my outer most-outer-divs with the the Swipeable Component. Then I simply listen for the onSwipedRight event and open the menu when this happens. Quite simple and working like a charm.

However what I really would like is to only listen to the "swipedRight" event when you swipe on the left part of the screen:

For this I hoped that in the EventData you receive something like x-start-absolute (basically the start position depending on the whole screen size). With this value I could then calculate if the users started swiping from the "yellow"-area. However as far as I can see there is nothing like this in there.

And I could not yet find another good way.
I saw #79, however I don't understand how this should work: If I place an extra element on the left side, it will either be before the other elements (and therefore make the left side "unclickable" / unusable) or behind it and then never be triggered at all.

Am I missing something? Is my approach wrong anyway?

[Nasicus]

Ah I found something!

In the EventData I have:

eventData.event.changedTouches[0].clientX

which appears to be the absolute start position! 👍

Is this indeed the way to go here? :)

EDIT:

Oh no.... I was completely wrong clientX is only the distance you swiped :/
So I don't have any idea at all how to achieve this then.

[hartzis]

@Nasicus We could possibly add something like initialXY to the evenData?
const [ initialX, initialY ] = eventData.initialXY

The solution in #79 should also work too. I'll see if i can get a small codesandbox.io setup to demonstrate.

[hartzis]

@Nasicus Check this codesandbox.io example out and tell me what you think.

https://codesandbox.io/s/swipeable-sidebar-using-react-burger-menu-6urqx

"Swipe right" inside the gray dashed area and it opens the menu.

[Nasicus]

Hey @hartzis thank you so much for your effort!

I think the initalXY would be great!

Also thanks for the codebox. I tried something similar, however the problem is now, that the swipeable div is before the text and therefore the text behind it is not selectable anymore. In my case there is also stuff there which has to be clickable.

[hartzis]

@Nasicus initial added with v5.4.0

Thank you for the issue and discussion!