feat: add backdrop to CSidebar

Author: woothu

src/components/index.d.ts

@@ -462,15 +462,15 @@ export declare class CScrollbar extends Vue {
 export declare class CSidebar extends Vue {
   fixed: boolean
   unfoldable: boolean
+  overlaid: boolean
   breakpoint: [string, boolean]
   minimize: boolean
   show: [boolean, string]
+  size: string
   hideOnMobileClick: boolean
   aside: boolean
   colorScheme: string
   dropdownMode: string
-  size: string
-  overlaid: boolean
 }
 
 export declare class CSidebarBrand extends Vue { 

src/components/sidebar/CSidebar.vue

@@ -65,16 +65,40 @@ export default {
   watch: {
     show (val) {
       this.open = val
+    },
+    open (val, oldVal) {
+      const backdrop = document.getElementsByClassName('c-sidebar-backdrop')[0]
+      if (val === true) {
+        backdrop.className = 'c-sidebar-backdrop c-show'
+      } else if (oldVal === true) {
+        backdrop.className = 'c-sidebar-backdrop d-none'
+      }
+    }
+  },
+  mounted () {
+    const backdrop = document.createElement('div')
+    if (this.open === true) {
+      backdrop.className = 'c-sidebar-backdrop c-show'
+    } else {
+      backdrop.className = 'c-sidebar-backdrop d-none'
     }
+    document.body.appendChild(backdrop)
+    backdrop.addEventListener('click', this.closeSidebar)
+  },
+  beforeDestroy () {
+    const backdrop = document.getElementsByClassName('c-sidebar-backdrop')[0]
+    backdrop.removeEventListener('click', this.closeSidebar)
+    document.body.removeChild(backdrop)
   },
   computed: {
     sidebarClasses () {
+      const haveResponsiveClass = this.breakpoint && this.open === 'responsive'
       return [
         'c-sidebar',
         `c-sidebar-${this.colorScheme}`,
         {
           'c-sidebar-show': this.open === true,
-          [`c-sidebar-${this.breakpoint}-show`]: this.open === 'responsive',
+          [`c-sidebar-${this.breakpoint}-show`]: haveResponsiveClass,
           'c-sidebar-fixed': this.fixed,
           'c-sidebar-right': this.aside,
           'c-sidebar-minimized': this.minimize && !this.unfoldable,
@@ -93,10 +117,13 @@ export default {
         this.hideOnMobileClick &&
         this.isOnMobile()
       ) {
-        this.open = 'responsive'
-        this.$emit('update:show', 'responsive')
+        this.closeSidebar()
       }
     },
+    closeSidebar () {
+      this.open = 'responsive'
+      this.$emit('update:show', 'responsive')
+    },
     isOnMobile () {
       return Boolean(getComputedStyle(this.$el).getPropertyValue('--is-mobile'))
     }