make side drawer use gesture service and fix its animations

2 files changed, 22 insertions, 7 deletions

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 76c64fe0..567d2e5e 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -9,9 +9,7 @@ const SideDrawer = {
     closeGesture: undefined
   }),
   created () {
-    const cb = () => this.toggleDrawer()
-    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, cb)
-    console.log(this.closeGesture)
+    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
   },
   components: { UserCard },
   computed: {
@@ -47,7 +45,6 @@ const SideDrawer = {
       this.toggleDrawer()
     },
     touchStart (e) {
-      console.log(this)
       GestureService.beginSwipe(e, this.closeGesture)
     },
     touchMove (e) {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 95ee21b4..e5046496 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -2,6 +2,7 @@
   <div class="side-drawer-container"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
+    <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
     <div class="side-drawer"
       :class="{'side-drawer-closed': closed}"
       @touchstart="touchStart"
@@ -111,16 +112,32 @@
   height: 100%;
   display: flex;
   align-items: stretch;
+  transition-duration: 0s;
+  transition-property: transform;
 }
 
 .side-drawer-container-open {
+  transform: translate(0%);
+}
+
+.side-drawer-container-closed {
+  transition-delay: 0.35s;
+  transform: translate(-100%);
+}
+
+.side-drawer-darken {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
   transition: 0.35s;
   transition-property: background-color;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.side-drawer-container-closed {
-  left: -100%;
+.side-drawer-darken-closed {
   background-color: rgba(0, 0, 0, 0);
 }
 
@@ -130,8 +147,9 @@
 
 .side-drawer {
   overflow-x: hidden;
-  transition: 0.35s;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition: 0.35s;
+  transition-property: transform;
   margin: 0 0 0 -100px;
   padding: 0 0 1em 100px;
   width: 80%;