Merge pull request #384 from webpack/feature/swipable-menu-from-366

Swipable Menu (From #366)

Author: skipjack

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

@@ -3,25 +3,45 @@
 
 .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;
+  }
+}
+
+.sidebar-mobile__toggle {
+  position: absolute;
+  top: 45px;
+  bottom: 0;
+  width: 32px;
+  left: 285px;
+}
+
+.sidebar-mobile__content {
+  position: relative;
+  width: 285px;
+  height: 100vh;
+  overflow-x: hidden;
+  background: getColor(white);
+  box-shadow: 0 0 5px getColor(emperor);
 }
 
 .sidebar-mobile__close {

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,26 @@ 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"
-          onClick={ this._close.bind(this) } />
+      <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="sidebar-mobile__toggle"
+          onTouchStart={this._handleTouchStart.bind(this)}
+          onTouchMove={this._handleOpenerTouchMove.bind(this)}
+          onTouchEnd={this._handleTouchEnd.bind(this)} />
 
-        { this._getSections() }
+        <div className="sidebar-mobile__content">
+          <i 
+            className="sidebar-mobile__close icon-cross"
+            onClick={ this._close.bind(this) } />
+          
+          { this._getSections() }
+        </div>
       </nav>
     );
   }
@@ -42,7 +60,7 @@ export default class SidebarMobile extends React.Component {
   _getSections() {
     return this.props.sections.map(section => (
       <div key={ section.url }>
-        <h3 className="sidebar-mobile__section">{ section.title }</h3>
+        <h3 className='sidebar-mobile__section'>{ section.title }</h3>
         { this._getPages(section.pages) }
       </div>
     ));
@@ -70,8 +88,7 @@ export default class SidebarMobile extends React.Component {
           key={ url } 
           className={ `sidebar-mobile__page ${active ? 'sidebar-mobile__page--active' : ''}` } 
           to={ url }
-          onClick={ this._close.bind(this) }
-        >
+          onClick={ this._close.bind(this) }>
           { page.title }
         </Link>
       );
@@ -101,4 +118,58 @@ 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].pageY;
+
+    // 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].pageY;
+    }
+  }
+
+  _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].pageY;
+    }
+  }
+
+  _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();
+    }
+  }
+}