fix: events back

app/src/react/components/app/app-center-events.js

@@ -0,0 +1,43 @@
+/* eslint-disable no-param-reassign */
+export default function AppCenterEvents(ref, paneWidth) {
+  let lastPress;
+  const abstract = {
+    down: ({pageX, target}) => {
+      if (ref.current) {
+        if (target.closest('.dismiss-side')) {
+          ref.current.style.left = `-${paneWidth}px`;
+          target.click();
+          return;
+        }
+        const left = parseInt(ref.current.style.left || -paneWidth, 10);
+        const windowWidth = window.innerWidth;
+        if (
+          (left === -(2 * paneWidth) && pageX < windowWidth - paneWidth)
+          || (left === 0 && pageX > paneWidth)) {
+          lastPress = Date.now();
+        }
+      }
+    },
+    move: () => {},
+    up: () => {
+      if (Date.now() - lastPress < 300) {
+        ref.current.style.left = `-${paneWidth}px`;
+      }
+      lastPress = undefined;
+    },
+  };
+  return {
+    onMouseDown: abstract.down,
+    onMouseMove: abstract.move,
+    onMouseUp: abstract.up,
+    onTouchStart: (event) => {
+      abstract.down(event.touches[0]);
+    },
+    onTouchMove: (event) => {
+      abstract.move(event.touches[0]);
+    },
+    onTouchEnd: (event) => {
+      abstract.up(event.touches[0]);
+    },
+  };
+}

app/src/react/components/app/index.jsx

@@ -18,6 +18,8 @@ import Right from 'components/right';
 import useBreakpoints from 'hooks/useBreakpoints';
 import usePaneWidth from 'hooks/usePaneWidth';
 
+import AppCenterEvents from './app-center-events';
+
 const App = () => {
   const ref = useRef(null);
   const {desktop} = useBreakpoints();
@@ -67,6 +69,8 @@ const App = () => {
       <div
         className={classnames('app__center', {isAnonymous})}
         ref={ref}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...AppCenterEvents(ref, paneWidth)}
       >
         {!isAnonymous && <Left />}
         <div className="main">