swipable sidebar on mobile

Author: prateekbh

components/sidebar-mobile/sidebar-mobile-style.scss

@@ -3,24 +3,44 @@
 
 .sidebar-mobile {
   position: fixed;
-  width: 280px;
+  width: 295px;
   height: 100vh;
   z-index: 100;
   top: 0;
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
-  background: getColor(white);
   transform: translate3D(-100%, 0, 0);
+  transform: translate3D(calc(-100% + 5px), 0, 0);
   transition: all 500ms;
 
   @include break {
     display: none;
   }
-
+  
   &--visible {
     transform: translate3D(0, 0, 0);
-    box-shadow: 0 0 5px getColor(emperor);
+  }
+
+  &.no-delay{
+    transition-duration: 0ms;
+  }
+
+  .opener{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 10px;
+    left: 285px;
+  }
+
+  .sidebar-content{
+    position: relative;
+    width: 285px;
+    height: 100vh;
+    overflow-x: hidden;
+    background: map-get($colors, white);
+    box-shadow: 0 0 5px map-get($colors, emperor);
   }
 }
 

components/sidebar-mobile/sidebar-mobile.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import Link from '../link/link';
 import './sidebar-mobile-style';
 
+let initialTouchPosition = {};
+let lastTouchPosition = {};
+
 export default class SidebarMobile extends React.Component {
   constructor(props) {
     super(props);
@@ -11,11 +14,21 @@ export default class SidebarMobile extends React.Component {
 
   render() {
     return (
-      <nav className="sidebar-mobile" ref={ ref => this.container = ref }>
-        <i className="sidebar-mobile__close icon-cross"
+      <nav className="sidebar-mobile" ref={ ref => this.container = ref } 
+        onTouchStart={this._handleTouchStart.bind(this)}
+        onTouchMove={this._handleTouchMove.bind(this)}
+        onTouchEnd={this._handleTouchEnd.bind(this)}>
+        <div className="opener"
+          onTouchStart={this._handleTouchStart.bind(this)}
+          onTouchMove={this._handleOpenerTouchMove.bind(this)}
+          onTouchEnd={this._handleTouchEnd.bind(this)}>
+        </div>
+        <div className="sidebar-content">
+          <i className="sidebar-mobile__close icon-cross"
           onClick={ this._close.bind(this) } />
-
-        { this._getSections() }
+          
+          { this._getSections() }
+        </div>
       </nav>
     );
   }
@@ -101,4 +114,55 @@ export default class SidebarMobile extends React.Component {
       'sidebar-mobile--visible'
     );
   }
+
+  _open() {
+    this.container.classList.add(
+      'sidebar-mobile--visible'
+    );
+  }
+
+  _handleTouchStart(e){
+    initialTouchPosition.x = e.touches[0].pageX;
+    initialTouchPosition.y = e.touches[0].clientY;
+    //for instant transform along with the touch
+    this.container.classList.add("no-delay");
+  }
+
+  _handleTouchMove(e){
+    let xDiff = initialTouchPosition.x - e.touches[0].pageX;
+    let yDiff = initialTouchPosition.y - e.touches[0].pageY;
+    let factor = Math.abs(yDiff/xDiff);
+    //factor makes sure horizontal and vertical scroll dont take place together
+    if(xDiff>0 && factor < 0.8){
+      e.preventDefault();
+      this.container.style.transform="translateX(-"+xDiff+"px)";
+      lastTouchPosition.x = e.touches[0].pageX;
+      lastTouchPosition.y = e.touches[0].clientY;
+    }
+  }
+
+  _handleOpenerTouchMove(e){
+    let xDiff = e.touches[0].pageX - initialTouchPosition.x;
+    let yDiff = initialTouchPosition.y - e.touches[0].pageY;
+    let factor = Math.abs(yDiff/xDiff);
+    //factor makes sure horizontal and vertical scroll dont take place together
+    if(xDiff>0 && xDiff<295 && factor < 0.8){
+      e.preventDefault();
+      this.container.style.transform="translateX(calc(-100% + "+xDiff+"px))";
+      lastTouchPosition.x = e.touches[0].pageX;
+      lastTouchPosition.y = e.touches[0].clientY;
+    }
+  }
+
+  _handleTouchEnd(e){
+    //free up all the inline styling
+    this.container.classList.remove("no-delay");
+    this.container.style="";
+    if(initialTouchPosition.x - lastTouchPosition.x > 100){
+      this._close();
+    } else if(lastTouchPosition.x - initialTouchPosition.x > 100){
+      this._open();
+    }
+
+  }
 }