refactor: SidebarToggler, AsideToggler

- add `defaultOpen` prop
- add toggle `force` param
- cleanup
- fixes `SidebarToggler` toggling on `mount` issue

Author: xidedix

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()

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()