move closing logic to drawer, add swipe to close

src/App.js

@@ -30,8 +30,7 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    ),
+    )
-    showMobileSidebar: false
   }),
   created () {
     // Load the locale from the storage
@@ -93,7 +92,7 @@ export default {
       this.finderHidden = hidden
     },
     toggleMobileSidebar () {
-      this.showMobileSidebar = !this.showMobileSidebar
+      this.$refs.sideDrawer.toggleDrawer()
     }
   }
 }

src/App.vue

@@ -14,9 +14,9 @@
         </div>
         <div class='item right'>
           <a href="#" @click.stop.prevent="toggleMobileSidebar()"><i class="button-icon icon-menu"></i></a>
-          <user-finder class="button-icon nav-icon" @toggled="onFinderToggled"></user-finder>
+          <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
+          <router-link class="mobile-hidden" @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
-          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
+          <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
       </div>
     </nav>
@@ -25,17 +25,11 @@
 
     <div v-if="" class="container" id="content">
       <side-drawer
+        ref="sideDrawer"
         :activatePanel="activatePanel"
-        :closed="!showMobileSidebar"
-        :clickoutside="toggleMobileSidebar"
         :logout="logout"
         >
       </side-drawer>
-      <!--
-        <button @click="activatePanel(mobileViews.postStatus)">post status</button>
-        <button @click="activatePanel(mobileViews.notifications)">notifs</button>
-        <button @click="activatePanel(mobileViews.timeline)">timeline</button>
-      -->
       <div class="sidebar-flexer">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">

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()
+      this.toggleDrawer()
-    },
-    clickedOutside () {
-      if (typeof this.clickoutside === 'function') {
-        this.clickoutside()
-      }
     },
     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()
+      }
     }
   }
 }

src/components/side_drawer/side_drawer.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="side-drawer-container" :class="{'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed}">
+  <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}">
+    <div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}" @touchstart="touchStart" @touchmove.prevent="touchMove">
+      <div class="side-drawer-heading">
+        <user-card-content :activatePanel="activatePanel" :user="currentUser" :switcher="false" :hideBio="true">
+        </user-card-content>
+      </div>
       <ul>
         <li v-if='currentUser'>
           <a href="#" @click="gotoPanel('poststatus')">
@@ -54,7 +58,7 @@
         </li>
       </ul>
     </div>
-    <div class="side-drawer-click-outside" @click.stop.prevent="clickedOutside" :class="{'side-drawer-click-outside-closed': closed}"></div>
+    <div class="side-drawer-click-outside" @click.stop.prevent="toggleDrawer" :class="{'side-drawer-click-outside-closed': closed}"></div>
   </div>
 </template>
 
@@ -110,7 +114,28 @@
 .side-drawer .panel {
   overflow: hidden;
   margin: 0;
+  display: flex;
 }
+
+.side-drawer-heading {
+  background: transparent;
+  flex-direction: column;
+  align-items: stretch;
+  display: flex;
+  min-height: 8em;
+  padding: 0;
+  margin: 0;
+
+  .profile-panel-background {
+    border-radius: 0;
+    .panel-heading {
+      background: transparent;
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+}
+
 .side-drawer ul {
   list-style: none;
   margin: 0;
@@ -123,40 +148,18 @@
   border-color: var(--border, $fallback--border);
   padding: 0;
 
-  &:first-child a {
+  a {
-    border-top-right-radius: $fallback--panelRadius;
+    display: block;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    padding: 0.8em 0.85em;
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-  }
 
-  &:last-child a {
+    &:hover {
-    border-bottom-right-radius: $fallback--panelRadius;
+      background-color: $fallback--lightBg;
-    border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      background-color: var(--lightBg, $fallback--lightBg);
-    border-bottom-left-radius: $fallback--panelRadius;
+    }
-    border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
   }
 }
 
 .side-drawer li:last-child {
   border: none;
 }
-
-.side-drawer a {
-  display: block;
-  padding: 0.8em 0.85em;
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
-  }
-
-  &.router-link-active {
-    font-weight: bolder;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
 </style>

src/components/user_finder/user_finder.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="user-finder-container">
+  <div>
-    <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
+    <div class="user-finder-container">
-    <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
+      <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
-    <template v-else>
+      <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
-      <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+      <template v-else>
-      <button class="btn search-button" @click="findUser(username)">
+        <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
-        <i class="icon-search"/>
+        <button class="btn search-button" @click="findUser(username)">
-      </button>
+          <i class="icon-search"/>
-      <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+        </button>
-    </template>
+        <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+      </template>
+    </div>
   </div>
 </template>