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>