Menu

src/components/menu/menudrawer.vue

@@ -67,30 +67,32 @@ export default {
       this.$emit('input', val);
     },
     mini: function(val) {
-      this.miniState = val;
+      this.setMini(val);
     },
     miniState: function(val) {
       this.$emit('update:mini', val);
     }
   },
   methods: {
-    handleLayout(state) {
-      console.log(`handleLayout: ${state}`);
-      this.drawerBelowBreakpoint = this.$refs.drawer.belowBreakpoint;
+    resize(delay) {
       this.$nextTick(() => {
         setTimeout(() => {
           window.dispatchEvent(new Event('resize'));
-        }, 100);
+        }, delay);
       });
     },
+    handleLayout(state) {
+      console.log(`handleLayout: ${state}`);
+      this.drawerBelowBreakpoint = this.$refs.drawer.belowBreakpoint;
+      this.resize(100);
+    },
     toggleMini() {
       this.miniState = !this.miniState;
-      // need to wait a bit till it fully expands/collapses
-      this.$nextTick(() => {
-        setTimeout(() => {
-          window.dispatchEvent(new Event('resize'));
-        }, 200);
-      });
+      this.resize(200);
+    },
+    setMini(mini) {
+      this.miniState = mini;
+      this.resize(200);
     },
     handleMouseOver() {
       if (this.autoExpand) {

src/components/menu/menulist.vue

@@ -1,6 +1,15 @@
 <template>
   <q-list class="db-menu-list">
-    <menu-list-item v-for="item in menuItems" v-bind:key="item.id" :item="item" :collapsed="collapsed" :active-class="activeClass" />
+    <menu-list-item
+      v-for="item in menuItems"
+      v-bind:key="item.id"
+      :item="item"
+      :collapsed="collapsed"
+      :active-class="activeClass"
+      @expansionItemClick="onExpansionItemClick(item)"
+      @itemExpanded="onItemExpanded(item)"
+      @itemCollapsed="onItemCollapsed(item)"
+    />
   </q-list>
 </template>
 <script>
@@ -27,7 +36,17 @@ export default {
   },
   computed: {},
   watch: {},
-  methods: {}
+  methods: {
+    onExpansionItemClick(item) {
+      this.$emit('expansionItemClick', item);
+    },
+    onItemExpanded(item) {
+      this.$emit('itemExpanded', item);
+    },
+    onItemCollapsed(item) {
+      this.$emit('itemCollapsed', item);
+    }
+  }
 };
 </script>
 <style lang="scss">

src/components/menu/menulistitem.vue

@@ -7,6 +7,9 @@
     expand-separator
     :class="`menuitem-ei-${item.id} ` + itemClass"
     :active-class="itemActiveClass"
+    @click="onClick"
+    @show="onShow"
+    @hide="onHide"
   >
     <q-tooltip anchor="top right" self="center middle" :target="`.menuitem-ei-${item.id} i`">{{ item.title }}</q-tooltip>
     <menu-list-item v-for="childItem in item.items" v-bind:key="childItem.id" :item="childItem" />
@@ -71,6 +74,16 @@ export default {
     }
   },
   watch: {},
-  methods: {}
+  methods: {
+    onClick(evt) {
+      this.$emit('expansionItemClick', evt);
+    },
+    onShow(evt) {
+      this.$emit('itemExpanded', evt);
+    },
+    onHide(evt) {
+      this.$emit('itemCollapsed', evt);
+    }
+  }
 };
 </script>

src/layouts/Default.vue

@@ -58,14 +58,10 @@
 
     <menu-drawer v-model="leftShown" :mini.sync="menuMini" :auto-expand="menuAutoExpand">
       <template v-slot:menu>
-        <menu-list :menu-items="menuItems"></menu-list>
+        <menu-list :menu-items="menuItems" v-on:expansionItemClick="menuMini = false"></menu-list>
       </template>
     </menu-drawer>
 
-    <q-drawer v-model="rightShown" side="right" bordered>
-      OPA
-    </q-drawer>
-
     <q-page-container>
       <transition :name="transitionName">
         <router-view />