feat: hide on click outside mobile sidebar

Author: xidedix

package.json

@@ -59,6 +59,7 @@
     "lint:fix": "eslint --ext .js,.vue . --fix"
   },
   "dependencies": {
+    "vue-clickaway": "^2.2.2",
     "vue-perfect-scrollbar": "^0.1.0"
   },
   "devDependencies": {

src/components/Sidebar/Sidebar.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="sidebar">
+  <div class="sidebar" v-on-clickaway="hideMobile">
     <slot>Sidebar</slot>
   </div>
 </template>
 <script>
+import { mixin as clickaway } from 'vue-clickaway'
+import { hideMobile } from '../../mixins/hideMobile'
+
 export default {
   name: 'sidebar',
+  mixins: [ clickaway, hideMobile ],
   props: {
     fixed: {
       type: Boolean,

src/components/Sidebar/SidebarNavItem.vue

@@ -5,9 +5,12 @@
 </template>
 
 <script>
+import { hideMobile } from '../../mixins/hideMobile'
+
 export default {
   name: 'sidebar-nav-item',
-  props: {
+    mixins: [ hideMobile ],
+    props: {
     classes: {
       type: String,
       default: ''
@@ -23,13 +26,6 @@ export default {
     itemClasses () {
       return this.classes ? this.classes.split(' ') : ''
     }
-  },
-  methods: {
-    hideMobile () {
-      if (document.body.classList.contains('sidebar-show')) {
-        document.body.classList.toggle('sidebar-show')
-      }
-    }
   }
 }
 </script>

src/components/Sidebar/SidebarToggler.vue

@@ -50,6 +50,7 @@ export default {
     },
     sidebarToggle (e) {
       e.preventDefault()
+      e.stopPropagation()
       this.toggle()
     }
   }

src/mixins/hideMobile.js

@@ -0,0 +1,11 @@
+const hideMobile = {
+  methods: {
+    hideMobile() {
+      if (document.body.classList.contains('sidebar-show')) {
+        document.body.classList.toggle('sidebar-show')
+      }
+    }
+  }
+}
+
+export { hideMobile }