got menu to close on logout

Author: aaronksaunders

Diff for: src/App.vue

@@ -1,60 +1,21 @@
 <template>
   <ion-app>
     <ion-split-pane content-id="main">
-      <ion-menu content-id="main" v-if="$store.state.user">
-        <ion-header>
-          <ion-toolbar color="primary">
-            <ion-title>Menu</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <ion-content>
-          <ion-list>
-            <ion-list-header>Navigate</ion-list-header>
-            <ion-menu-toggle auto-hide="false">
-              <ion-item button @click="$router.push('/')">
-                <ion-icon name="home"></ion-icon>
-                <ion-label>
-                  <span :class="[{boldLabel : isActive('/') }, 'menu-label']">Home</span>
-                </ion-label>
-              </ion-item>
-            </ion-menu-toggle>
-            <ion-menu-toggle auto-hide="false">
-              <ion-item button @click="$router.push('/about')">
-                <ion-icon name="help"></ion-icon>
-                <ion-label>
-                  <span :class="[{boldLabel : isActive('/about') }, 'menu-label']">About</span>
-                </ion-label>
-              </ion-item>
-            </ion-menu-toggle>
-          </ion-list>
-        </ion-content>
-        <ion-footer style="text-align:center" class="ion-padding">
-          <ion-button @click="logout()">LOGOUT</ion-button>
-        </ion-footer>
-      </ion-menu>
-
+      <Menu />
       <ion-vue-router id="main"></ion-vue-router>
     </ion-split-pane>
   </ion-app>
 </template>
 
 <script>
-import store from "./store";
-
+import Menu from "./components/Menu";
 export default {
   name: "App",
-  components: {},
+  components: {
+    Menu
+  },
   computed: {},
-  methods: {
-    isActive(_path) {
-      return this.$route.path == _path;
-    },
-    async logout() {
-      await store.dispatch("user/logout");
-      this.$router.replace("/login");
-    }
-  }
+  methods: {}
 };
 </script>
 <style scoped>

Diff for: src/components/Menu.vue

@@ -0,0 +1,66 @@
+/* eslint-disable no-debugger */
+<template>
+  <ion-menu content-id="main" side="start" id="main-menu" v-if="$store.state.user.user">
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-list-header>
+          <h2>{{$store.state.user.user.email}}</h2>
+        </ion-list-header>
+        <ion-menu-toggle auto-hide="false">
+          <ion-item button @click="$router.push('/')">
+            <ion-icon name="home"></ion-icon>
+            <ion-label>
+              <span :class="[{boldLabel : isActive('/') }, 'menu-label']">Home</span>
+            </ion-label>
+          </ion-item>
+        </ion-menu-toggle>
+        <ion-menu-toggle auto-hide="false">
+          <ion-item button @click="$router.push('/about')">
+            <ion-icon name="help"></ion-icon>
+            <ion-label>
+              <span :class="[{boldLabel : isActive('/about') }, 'menu-label']">About</span>
+            </ion-label>
+          </ion-item>
+        </ion-menu-toggle>
+      </ion-list>
+    </ion-content>
+    <ion-footer style="text-align:center" class="ion-padding">
+      <ion-button @click="logout()">LOGOUT</ion-button>
+    </ion-footer>
+  </ion-menu>
+</template>
+
+<script>
+import store from "../store";
+export default {
+  name: "Menu",
+  components: {},
+  computed: {},
+  methods: {
+    isActive(_path) {
+      return this.$route.path == _path;
+    },
+    async logout() {
+      let menuController = document.querySelector("#main-menu");
+      await menuController.close(true);
+      await store.dispatch("user/logout");
+      this.$router.replace("/login");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.menu-label {
+  padding-left: 0.5em !important;
+}
+.boldLabel {
+  font-weight: bold;
+}
+</style>

Diff for: src/store/auth-store.js

@@ -22,7 +22,7 @@ export default {
       });
     },
     login({ commit }, payload) {
-      if (payload.email == "[email protected]") {
+      if (payload.email !== "") {
         commit("hasUser", { ...payload });
         return true;
       } else {