Moved hamburger logic to store & auto hide on route change

src/components/NavigationHeader.vue

@@ -6,11 +6,11 @@
 
     <SearchInput />
 
-    <Hamburger @click="toggleNav" />
+    <Hamburger />
 
     <NavigationIcon class="desktop-only" :route="profileRoute" />
 
-    <div class="nav__list mobile-only" :class="{ open: hamburgerMenuOpen }">
+    <div class="nav__list mobile-only" :class="{ open: isOpen }">
       <NavigationIcons>
         <NavigationIcon :route="profileRoute" />
       </NavigationIcons>
@@ -43,17 +43,12 @@ export default {
   },
   data() {
     return {
-      listTypes: storage.homepageLists,
-      hamburgerMenuOpen: false
+      listTypes: storage.homepageLists
     };
   },
-  methods: {
-    toggleNav() {
-      this.hamburgerMenuOpen = !this.hamburgerMenuOpen;
-    }
-  },
   computed: {
     ...mapGetters("user", ["loggedIn"]),
+    ...mapGetters("hamburger", ["isOpen"]),
     profileRoute() {
       return {
         title: !this.loggedIn ? "Signin" : "Profile",

src/components/ui/Hamburger.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     class="nav__hamburger"
-    :class="{ open }"
-    @click="toggleNav"
-    @keydown.enter="toggleNav"
+    :class="{ open: isOpen }"
+    @click="toggle"
+    @keydown.enter="toggle"
     tabindex="0"
   >
     <div v-for="_ in 3" class="bar"></div>
@@ -11,17 +11,14 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from "vuex";
+
 export default {
-  data() {
-    return {
-      open: false
-    };
+  computed: {
+    ...mapGetters("hamburger", ["isOpen"])
   },
   methods: {
-    toggleNav() {
-      this.open = !this.open;
-      this.$emit("click", this.open);
-    }
+    ...mapActions("hamburger", ["toggle"])
   }
 };
 </script>

src/modules/hamburger.js

@@ -0,0 +1,19 @@
+export default {
+  namespaced: true,
+  state: {
+    open: false
+  },
+  getters: {
+    isOpen: state => state.open
+  },
+  mutations: {
+    SET_OPEN: state => (state.open = true),
+    SET_CLOSE: state => (state.open = false),
+    TOGGLE: state => (state.open = !state.open)
+  },
+  actions: {
+    open: ({ commit }) => commit("SET_OPEN"),
+    close: ({ commit }) => commit("SET_CLOSE"),
+    toggle: ({ commit }) => commit("TOGGLE")
+  }
+};

src/routes.js

@@ -84,11 +84,13 @@ const router = new VueRouter({
 });
 
 const loggedIn = () => store.getters["user/loggedIn"];
-const isOpen = () => store.getters["user/isOpen"];
+const popupIsOpen = () => store.getters["popup/isOpen"];
+const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 
 router.beforeEach((to, from, next) => {
   store.dispatch("documentTitle/updateTitle", to.name);
-  if (isOpen()) store.dispatch("popup/close");
+  if (popupIsOpen()) store.dispatch("popup/close");
+  if (hamburgerIsOpen()) store.dispatch("hamburger/close");
 
   // Toggle mobile nav
   if (document.querySelector(".nav__hamburger--active")) {

src/store.js

@@ -6,6 +6,7 @@ import documentTitle from "./modules/documentTitle";
 import torrentModule from "./modules/torrentModule";
 import user from "./modules/user";
 import popup from "./modules/popup";
+import hamburger from "./modules/hamburger";
 
 Vue.use(Vuex);
 
@@ -15,7 +16,8 @@ const store = new Vuex.Store({
     documentTitle,
     torrentModule,
     user,
-    popup
+    popup,
+    hamburger
   }
 });