From 9f3745b71c1062be404a1b3cdc586f0a45d7d2d3 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 14 Jan 2022 17:02:00 +0100
Subject: [PATCH] Moved hamburger logic to store & auto hide on route change

---
 src/components/NavigationHeader.vue | 13 ++++---------
 src/components/ui/Hamburger.vue     | 19 ++++++++-----------
 src/modules/hamburger.js            | 19 +++++++++++++++++++
 src/routes.js                       |  6 ++++--
 src/store.js                        |  4 +++-
 5 files changed, 38 insertions(+), 23 deletions(-)
 create mode 100644 src/modules/hamburger.js

diff --git a/src/components/NavigationHeader.vue b/src/components/NavigationHeader.vue
index a6c5626..4f07062 100644
--- a/src/components/NavigationHeader.vue
+++ b/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",
diff --git a/src/components/ui/Hamburger.vue b/src/components/ui/Hamburger.vue
index a3523ec..3ffa7d8 100644
--- a/src/components/ui/Hamburger.vue
+++ b/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>
diff --git a/src/modules/hamburger.js b/src/modules/hamburger.js
new file mode 100644
index 0000000..2c44546
--- /dev/null
+++ b/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")
+  }
+};
diff --git a/src/routes.js b/src/routes.js
index 065dd31..5cc7491 100644
--- a/src/routes.js
+++ b/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")) {
diff --git a/src/store.js b/src/store.js
index 01a270d..426699d 100644
--- a/src/store.js
+++ b/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
   }
 });