Hook into route change to hide the mobile menu

src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="layout-wrapper">
         <app-topbar @menubutton-click="onMenuButtonClick"/>
-        <app-menu :active="sidebarActive" @menuitem-click="onMenuItemClick" />
+        <app-menu :active="sidebarActive" />
         <div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
         <div class="layout-content">
             <router-view/>
@@ -21,13 +21,15 @@ export default {
             sidebarActive: false
         }
     },
+    watch: {
+        $route() {
+            this.sidebarActive = false;
+        }
+    },
     methods: {
         onMenuButtonClick() {
             this.sidebarActive = !this.sidebarActive;
         },
-        onMenuItemClick(event) {
-            this.sidebarActive = false;
-        },
         onMaskClick(event) {
             this.sidebarActive = false;
         }

src/AppMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['layout-sidebar', {'active': active}]" @click="onClick">
+    <div :class="['layout-sidebar', {'active': active}]">
         <div class="layout-menu">
             <a @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
                 <img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
@@ -157,11 +157,6 @@ export default {
     methods: {
         toggleMenu(event, index) {
             this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
-        },
-        onClick(event) {
-            if (event.target.nodeName === 'A') {
-                this.$emit('menuitem-click');
-            }
         }
     }
 }