refactor(SidebarMinimizer): extract togglePs mixin

Author: xidedix

src/components/Sidebar/SidebarMinimizer.vue

@@ -2,17 +2,24 @@
   <button class="sidebar-minimizer" type="button" @click="onClick()"></button>
 </template>
 <script>
+import { togglePs } from '../../mixins/togglePs'
 
 export default {
   name: 'sidebar-minimizer',
+  mixins: [ togglePs ],
+  mounted: function () {
+    const isMinimized = document.body.classList.contains('sidebar-minimized')
+    this.togglePs(!isMinimized)
+  },
   methods: {
     onClick () {
       this.sidebarMinimize()
       this.brandMinimize()
     },
     sidebarMinimize () {
-      document.body.classList.toggle('sidebar-minimized')
-      document.querySelector('.sidebar-nav section').classList.toggle('ps')
+      const isMinimized = document.body.classList.toggle('sidebar-minimized')
+      this.$emit('cui-sidebar-minimize', isMinimized)
+      this.togglePs(!isMinimized)
     },
     brandMinimize () {
       document.body.classList.toggle('brand-minimized')

src/mixins/togglePs.js

@@ -0,0 +1,19 @@
+const togglePs = {
+  methods: {
+    togglePs(toggle) {
+      const sidebar = document.querySelector('.sidebar-nav section')
+      if (sidebar) {
+        // sidebar.classList.toggle('ps', toggle);
+        // sidebar.classList.toggle('ps-container', toggle);
+        // sidebar.classList.toggle('ps--active-y', toggle);
+        if (toggle) {
+          sidebar.classList.add('ps', 'ps-container', 'ps--active-y')
+        } else {
+          sidebar.classList.remove('ps', 'ps-container', 'ps--active-y')
+        }
+      }
+    }
+  }
+}
+
+export { togglePs }