Minor

src/components/layout/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout" :class="classObject" v-resize>
-    <app-navbar :value="opened" v-on:toggle-menu="toggleSidebar($event)"></app-navbar>
-    <sidebar></sidebar>
+    <app-navbar :value="opened" @toggle-menu="toggleSidebar"></app-navbar>
+    <sidebar/>
     <div class="content-wrap" id="content-wrap">
       <main id="content" class="content" role="main">
         <vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
@@ -16,8 +16,9 @@
 </template>
 
 <script>
-  import {mapGetters, mapActions} from 'vuex'
+  import {mapGetters} from 'vuex'
 
+  import store from './../../store'
   import AppNavbar from './app-navbar/AppNavbar'
   import Sidebar from './sidebar/Sidebar'
   import Resize from 'directives/ResizeHandler'
@@ -37,15 +38,17 @@
         type: Boolean,
         default: false,
       },
-      opened: {
-        type: Boolean,
-        default: true
+    },
+    data () {
+      return {
+        opened: true
       }
     },
     methods: {
-      ...mapActions([
-        'toggleSidebar'
-      ])
+      toggleSidebar (opened) {
+        this.opened = opened
+        store.dispatch('toggleSidebar', this.opened)
+      }
     },
     computed: {
       ...mapGetters([

src/components/layout/app-navbar/AppNavbar.vue

@@ -1,7 +1,7 @@
 <template>
 
   <vuestic-navbar>
-    <header-selector slot="selector" v-on:click="valueProxy = $event"/>
+    <header-selector slot="selector" v-model="valueProxy"/>
     <i slot="logo" class="i-vuestic"></i>
     <div slot="center" class="navbar-text offset-md-1 col-md-7 d-none d-lg-flex align-items-center justify-content-center">
       {{$t('navbar.messageUs')}}&nbsp;<a href="mailto:[email protected]">[email protected]</a>
@@ -46,9 +46,6 @@
     computed: {
       valueProxy: {
         get () {
-          if (this.value === true) {
-            this.$emit('toggle-menu', this.value)
-          }
           return this.value
         },
         set (value) {

src/components/layout/app-navbar/components/HeaderSelector.vue

@@ -1,21 +1,22 @@
 <template>
   <div class="header-selector-container"
-       :class="{ 'i-menu-expanded': !openedLocal, 'i-menu-collapsed': openedLocal }" v-on:click="onClick">
-  </div>
+       :class="{ 'i-menu-expanded': !value, 'i-menu-collapsed': value }"
+       @click="onClick()"
+  />
 </template>
 
 <script>
   export default {
     name: 'header-selector',
-    data () {
-      return {
-        openedLocal: true
-      }
+    props: {
+      value: {
+        type: Boolean,
+        required: true
+      },
     },
     methods: {
       onClick () {
-        this.openedLocal = !this.openedLocal
-        this.$emit('click', this.openedLocal)
+        this.$emit('input', !this.value)
       }
     }
   }

src/components/layout/sidebar/Sidebar.vue

@@ -53,6 +53,12 @@
     components: {
       Expanding
     },
+    /* props: {
+      show: {
+        type: Boolean,
+        default: true
+      },
+    }, */
     methods: {
       ...mapActions({
         expand: 'toggleExpandMenuItem'