refactor: SidebarToggler, AsideToggler

- add `defaultOpen` prop - add toggle `force` param - cleanup - fixes `SidebarToggler` toggling on `mount` issue
coreui · xidedix · Jun 28, 2018 · Jun 28, 2018 · Jun 28, 2018 · Jun 28, 2018
commit 0975157e1a6952d59a720d52f00dde776df71ecf
diff --git a/src/components/Aside/AsideToggler.vue b/src/components/Aside/AsideToggler.vue
@@ -16,35 +16,34 @@ import toggleClasses from '../../shared/toggle-classes'
 export default {
  name: 'AsideToggler',
  props: {
-    mobile: {
+    defaultOpen: {
      type: Boolean,
      default: false
    },
    display: {
      type: String,
      default: ''
-    }
+    },
+    mobile: {
+      type: Boolean,
+      default: false
+    },
  },
  computed: {
    classList () {
      return [
        'navbar-toggler'
-        // 'd-none',
-        // 'd-lg-inline-block'
      ]
    }
  },
-  mounted: function () {
-    // this.toggle()
-  },
  methods: {
-    toggle () {
+    toggle (force) {
      const [display, mobile] = [this.display, this.mobile]
      let cssClass = asideMenuCssClasses[0]
      if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
        cssClass = `aside-menu-${display}-show`
      }
-      toggleClasses(cssClass, asideMenuCssClasses)
+      toggleClasses(cssClass, asideMenuCssClasses, force)
    },
    asideToggle (e) {
      e.preventDefault()

diff --git a/src/components/Sidebar/SidebarToggler.vue b/src/components/Sidebar/SidebarToggler.vue
@@ -16,35 +16,37 @@ import toggleClasses from '../../shared/toggle-classes'
 export default {
  name: 'SidebarToggler',
  props: {
-    mobile: {
+    defaultOpen: {
      type: Boolean,
-      default: false
+      default: true
    },
    display: {
      type: String,
      default: 'lg'
+    },
+    mobile: {
+      type: Boolean,
+      default: false
    }
  },
  computed: {
    classList () {
      return [
        'navbar-toggler'
-        // 'd-none',
-        // 'd-lg-inline-block'
      ]
    }
  },
  mounted: function () {
-    this.toggle()
+    this.toggle(this.defaultOpen)
  },
  methods: {
-    toggle () {
+    toggle (force) {
      const [display, mobile] = [this.display, this.mobile]
      let cssClass = sidebarCssClasses[0]
      if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
        cssClass = `sidebar-${display}-show`
      }
-      toggleClasses(cssClass, sidebarCssClasses)
+      toggleClasses(cssClass, sidebarCssClasses, force)
    },
    sidebarToggle (e) {
      e.preventDefault()