feat: add vuex state managment

src/containers/TheSidebar.vue

@@ -2,7 +2,8 @@
   <CSidebar 
     fixed 
     :minimize="minimize"
-    :show.sync="show"
+    :show="show"
+    @update:show="(value) => $store.commit('set', ['sidebarShow', value])"
   >
     <CSidebarBrand class="d-md-down-none" to="/">
       <CIcon 
@@ -14,10 +15,10 @@
       />
     </CSidebarBrand>
 
-    <CRenderFunction flat :content-to-render="nav"/>
+    <CRenderFunction flat :content-to-render="$options.nav"/>
     <CSidebarMinimizer
       class="d-md-down-none"
-      @click.native="minimize = !minimize"
+      @click.native="$store.commit('set', ['sidebarMinimize', !minimize])"
     />
   </CSidebar>
 </template>
@@ -27,22 +28,14 @@ import nav from './_nav'
 
 export default {
   name: 'TheSidebar',
-  data () {
-    return {
-      minimize: false,
-      nav,
-      show: 'responsive'
+  nav,
+  computed: {
+    show () {
+      return this.$store.state.sidebarShow 
+    },
+    minimize () {
+      return this.$store.state.sidebarMinimize 
     }
-  },
-  mounted () {
-    this.$root.$on('toggle-sidebar', () => {
-      const sidebarOpened = this.show === true || this.show === 'responsive'
-      this.show = sidebarOpened ? false : 'responsive'
-    })
-    this.$root.$on('toggle-sidebar-mobile', () => {
-      const sidebarClosed = this.show === 'responsive' || this.show === false
-      this.show = sidebarClosed ? true : 'responsive'
-    })
   }
 }
 </script>