move closing logic to drawer, add swipe to close

1 files changed, 25 insertions, 7 deletions

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 6541077b..2064dfa5 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,23 +1,41 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const deltaX = (oldX, newX) => newX - oldX
+
+const touchEventX = e => e.touches[0].screenX
+
 const SideDrawer = {
-  props: [ 'activatePanel', 'closed', 'clickoutside', 'logout' ],
+  props: [ 'activatePanel', 'logout' ],
+  data: () => ({
+    closed: true,
+    touchX: 0
+  }),
+  components: { UserCardContent },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
     }
   },
   methods: {
+    toggleDrawer () {
+      this.closed = !this.closed
+    },
     gotoPanel (panel) {
       this.activatePanel(panel)
-      this.clickoutside && this.clickoutside()
-    },
-    clickedOutside () {
-      if (typeof this.clickoutside === 'function') {
-        this.clickoutside()
-      }
+      this.toggleDrawer()
     },
     doLogout () {
       this.logout()
       this.gotoPanel('timeline')
+    },
+    touchStart (e) {
+      this.touchX = touchEventX(e)
+    },
+    touchMove (e) {
+      const delta = deltaX(this.touchX, touchEventX(e))
+      if (delta < -30) {
+        this.toggleDrawer()
+      }
     }
   }
 }