works but hacky

2 files changed, 60 insertions, 18 deletions

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index bf9df753..b1b7701c 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,11 +1,19 @@
 const SideDrawer = {
-  props: [ 'activatePanel', 'closed' ],
+  props: [ 'activatePanel', 'closed', 'clickoutside' ],
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    gotoPanel (panel) {
+      this.activatePanel(panel)
+      this.clickoutside && this.clickoutside()
     },
-    chat () {
-      return this.$store.state.chat.channel
+    clickedOutside () {
+      if (typeof this.clickoutside === 'function') {
+        this.clickoutside()
+      }
     }
   }
 }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 8e2629b8..b5f399b5 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,39 +1,46 @@
 <template>
-  <div>
+  <div class="side-drawer-container" :class="{'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed}">
     <div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}">
       <ul>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" to='/main/friends'>
+          <a href="#" @click="gotoPanel('poststatus')">poststatus</a>
+        </li>
+        <li v-if='currentUser'>
+          <a href="#" @click="gotoPanel('notifications')">notifications</a>
+        </li>
+        <li v-if='currentUser'>
+          <router-link @click.native="gotoPanel('timeline')" to='/main/friends'>
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+          <router-link @click.native="gotoPanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+          <router-link @click.native="gotoPanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             {{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if='currentUser && currentUser.locked'>
-          <router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
+          <router-link @click.native="gotoPanel('timeline')" to='/friend-requests'>
             {{ $t("nav.friend_requests") }}
           </router-link>
         </li>
         <li>
-          <router-link @click.native="activatePanel('timeline')" to='/main/public'>
+          <router-link @click.native="gotoPanel('timeline')" to='/main/public'>
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li>
-          <router-link @click.native="activatePanel('timeline')" to='/main/all'>
+          <router-link @click.native="gotoPanel('timeline')" to='/main/all'>
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
     </div>
+    <div class="side-drawer-click-outside" @click.stop.prevent="clickedOutside" :class="{'side-drawer-click-outside-closed': closed}"></div>
   </div>
 </template>
 
@@ -42,21 +49,48 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.side-drawer-container {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+}
+
+.side-drawer-container-open {
+  transition-delay: 0.0s;
+  transition-property: left;
+}
+
+.side-drawer-container-closed {
+  left: -100%;
+  transition-delay: 0.5s;
+  transition-property: left;
+}
+
+.side-drawer-click-outside {
+  flex: 1 1 100%;
+}
+
 .side-drawer {
-  height: 100%; /* 100% Full-height */
-  position: fixed; /* Stay in place */
-  z-index: 1000; /* Stay on top */
-  top: 0; /* Stay at the top */
-  left: -200px;
   overflow-x: hidden; /* Disable horizontal scroll */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  margin: 0;
-  padding-left: 200px;
+  margin: 0 0 0 -100px;
+  padding: 0 0 0 100px;
+  width: 75%;
+  flex: 0 0 75%;
+}
+
+.side-drawer-click-outside-closed {
+  flex: 0 0 0;
 }
 
 .side-drawer-closed {
-  left: calc(-100% - 200px);
+  margin: 0 0 0 calc(-100% - 100px);
 }
 
 .side-drawer .panel {