diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 9b39af8a..cdc8c3cd 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <CSidebar position="fixed" selfHiding="md">
+  <CSidebar position="fixed" selfHiding="md" :class="sidebarClass">
     <CSidebarBrand>
       <CIcon
         customClasses="sidebar-brand-full"
@@ -26,5 +26,10 @@ export default {
   components: {
     AppSidebarNav,
   },
+  computed: {
+    sidebarClass () {
+      return this.$store.state.sidebarClass
+    }
+  }
 };
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 8df94b64..395ddcd1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,9 +2,17 @@ import { createStore } from "vuex";
 
 export default createStore({
   state: {
-    sidebarShow: true,
+    sidebarClass: '',
+  },
+  mutations: {
+    toggleSidebar (state) {
+      if(state.sidebarClass === ''){
+        state.sidebarClass = 'sidebar-self-hiding-xxl'
+      }else{
+        state.sidebarClass = ''
+      }
+    }
   },
-  mutations: {},
   actions: {},
   modules: {},
 });