refactor: refactor CSidebar show prop mechanism

Author: woothu

src/components/Sidebar/CSidebar.vue

@@ -21,8 +21,8 @@ export default {
     },
     minimize: Boolean,
     show: {
-      type: Boolean,
-      default: null
+      type: [Boolean, String],
+      default: 'responsive'
     },
     size: {
       type: String,
@@ -68,24 +68,13 @@ export default {
     }
   },
   computed: {
-    displayClasses () {
-      const breakpointPrefix = this.breakpoint === false ? '' : `-${this.breakpoint}`
-      const responsiveClass = `c-sidebar${breakpointPrefix}-show`
-      if (this.open === false) {
-        return null
-      } else if (this.open === true) {
-        return ['c-sidebar-show', breakpointPrefix ? responsiveClass : '' ]
-      } else if (this.open === null) {
-        return responsiveClass
-      }
-    },
-
     sidebarClasses () {
       return [
         'c-sidebar',
         `c-sidebar-${this.colorScheme}`,
-        this.displayClasses,
         {
+          'c-sidebar-show': this.open === true,
+          [`c-sidebar-${this.breakpoint}-show`]: this.open === 'responsive',
           'c-sidebar-fixed': this.fixed,
           'c-sidebar-right': this.aside,
           'c-sidebar-minimized': this.minimize && !this.unfoldable,
@@ -104,8 +93,8 @@ export default {
         this.hideOnMobileClick &&
         this.isOnMobile()
       ) {
-        this.open = false
-        this.$emit('update:show', false)
+        this.open = 'responsive'
+        this.$emit('update:show', 'responsive')
       }
     },
     isOnMobile () {

src/components/Sidebar/tests/__snapshots__/CSidebar.spec.js.snap

@@ -10,7 +10,7 @@ exports[`CSidebar .vue renders correctly 1`] = `
 exports[`CSidebar .vue renders correctly 2`] = `
 <div>
   <div
-    class="c-sidebar c-sidebar-dark c-sidebar-show c-sidebar-lg-show c-sidebar-fixed"
+    class="c-sidebar c-sidebar-dark c-sidebar-show c-sidebar-fixed"
   >
     <a
       href="/some-path"

src/components/index.d.ts

@@ -457,7 +457,7 @@ export declare class CSidebar extends Vue {
   unfoldable: boolean
   breakpoint: [string, boolean]
   minimize: boolean
-  show: boolean
+  show: [boolean, string]
   hideOnMobileClick: boolean
   aside: boolean
   colorScheme: string