feat: rewrite CSidebar mechanism, delete hide mobile mixin

- allow menaging sidebar state by props,
- detect if sidebar is in mobile mode by elementResizeDetector
- separate mobile and desktop sidebar state,
- listen for closing click only in mobile mode (performance),
- replace 'display' prop with 'breakpoint',
- add noHideOnMobileClick which disabled sidebar closing mechanism
in mobile mode

Author: woothu

src/components/Sidebar/CSidebar.vue

@@ -1,24 +1,28 @@
 <template>
-  <div :class="sidebarClasses" v-on-clickaway="hideMobile">
+  <div :class="sidebarClasses">
     <slot>Sidebar</slot>
   </div>
 </template>
-<script>
-import { mixin as clickaway } from 'vue-clickaway2'
-import { hideMobile } from './hideMobile'
 
+<script>
+import elementResizeDetectorMaker from 'element-resize-detector'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 export default {
   name: 'CSidebar',
-  mixins: [clickaway, hideMobile],
   props: {
     fixed: Boolean,
     minimize: Boolean,
-    display: {
-      type: [Boolean, String],
+    show: {
+      type: Boolean,
+      default: true
+    },
+    mobileShow: Boolean,
+    noHideOnMobileClick: Boolean,
+    breakpoint: {
+      type: [String, Boolean],
       default: 'lg',
-      validator: val => [true, false, 'sm', 'md', 'lg', 'xl'].includes(val)
+      validator: val => [false, 'sm', 'md', 'lg', 'xl'].includes(val)
     },
-    mobile: Boolean,
     aside: Boolean,
     light: Boolean
   },
@@ -31,36 +35,110 @@ export default {
   },
   data () {
     return {
-      displayed: this.display,
-      minimized: this.minimize
+      open: this.show,
+      mobileOpen: this.mobileShow,
+      minimized: this.initialMinimize,
+      erd: elementResizeDetectorMaker(),
+      bodyWidth: undefined,
     }
   },
   mounted () {
+    this.erd.listenTo(document.body, (el) => this.bodyWidth = el.clientWidth)
+
     this.$root.$on(`c-${this.mode}-toggle-minimize`, () => {
-      this.minimized = !this.minimized
+      this.switchState('minimized')
     })
     this.$root.$on(`c-${this.mode}-toggle`, () => {
-      this.displayed = this.displayed ? false : this.display || true
+      if (this.isOnMobile) {
+        this.switchState('mobileOpen')
+      } else {
+        this.switchState('open')
+      }
     })
   },
+  watch: {
+    show (val, oldVal) {
+      if (val !== oldVal && val !== this.open) {
+        this.switchState('open')
+      }
+    },
+    mobileShow (val, oldVal) {
+      if (val !== oldVal && val !== this.mobileOpen) {
+        this.switchState('mobileOpen')
+      }
+    },
+    minimize (val, oldVal) {
+      if (val !== oldVal && val !== this.minimized) {
+        this.switchState('minimized')
+      }
+    },
+    isOnMobile: {
+      immediate: true,
+      handler (val, oldVal) {
+        if (val === true && val !== oldVal) {
+          document.body.addEventListener('click', this.mobileClick)
+        } else if (oldVal === true) {
+          document.body.removeEventListener('click', this.mobileClick)
+        }
+      }
+    }
+  },
   computed: {
     mode () {
       return this.aside ? 'aside' : 'sidebar'
     },
-    breakpoint () {
-      return this.displayed === true || this.mobile ? '' : '-' + this.display
+    isVisible () {
+      if (this.bodyWidth) {
+        return this.isOnMobile ? this.mobileOpen : this.open
+      }
+      return false
     },
     sidebarClasses () {
       return [
-               'c-sidebar',
-               `c-sidebar-${this.light ? 'light' : 'dark'}`,
-               {
-                 [`c-sidebar${this.breakpoint}-show`]: this.displayed,
-                 'c-sidebar-fixed': this.fixed,
-                 'c-sidebar-minimized': this.minimized,
-                 'c-sidebar-right': this.aside
-               }
-             ]
+        this.displayClass,
+        'c-sidebar',
+        `c-sidebar-${this.light ? 'light' : 'dark'}`,
+        {
+          'c-sidebar-show': this.isOnMobile && this.mobileOpen,
+          [`c-sidebar-${this.breakpoint}-show`]: this.open,
+          'c-sidebar-fixed': this.fixed,
+          'c-sidebar-minimized': this.minimized,
+          'c-sidebar-right': this.aside
+        }
+      ]
+    },
+    breakpoints () {
+      return {
+        'sm': getStyle('--breakpoint-sm') || '576px',
+        'md': getStyle('--breakpoint-md') || '768px',
+        'lg': getStyle('--breakpoint-lg') || '992px',
+        'xl': getStyle('--breakpoint-xl') || '1200px'
+      }
+    },
+    isOnMobile () {
+      const mobileWidth = parseFloat(this.breakpoints[this.breakpoint]) || 0
+      return this.bodyWidth && (this.bodyWidth < mobileWidth)
+    }
+  },
+  methods: {
+    mobileClick (event) {
+      if (!this.mobileOpen || this.noHideOnMobileClick) {
+        return
+      }
+      const classList = Array.from(event.target.classList).join()
+      const clickedOutsideSidebar = !this.$el.contains(event.target)
+      if (
+        (clickedOutsideSidebar && !classList.includes('c-header-toggler')) || (!clickedOutsideSidebar && event.target.tagName === 'A')
+      ) {
+        this.switchState('mobileOpen')
+      }
+    },
+    switchState (variable) {
+      const propNames = {
+        open: 'show', minimized: 'minimize', mobileOpen: 'mobileShow'
+      }
+      this.$emit(`update:${propNames[variable]}`, !this[variable])
+      this[variable] = !this[variable]
     }
   }
 }

src/components/Sidebar/CSidebarNavItem.vue

@@ -13,9 +13,8 @@
     />
   </CSidebarNavDropdown>
   <li
-    :class="['c-nav-item', item.classes]"
-    @click="hideMobile"
     v-else
+    :class="['c-nav-item', item.classes]"
   >
     <slot>
       <CSidebarNavLink v-bind="item"/>
@@ -24,10 +23,8 @@
 </template>
 
 <script>
-import { hideMobile } from './hideMobile'
 export default {
   name: 'CSidebarNavItem',
-  mixins: [ hideMobile ],
   props: {
     item: [String, Array, Object]
   }