make notifications close on navigation

2 files changed, 17 insertions, 5 deletions

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index fd373ac1..c1f5c2a9 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -28,9 +28,14 @@ const MobileNav = {
     toggleMobileSidebar () {
       this.$refs.sideDrawer.toggleDrawer()
     },
-    toggleMobileNotifications () {
-      this.notificationsOpen = !this.notificationsOpen
-      if (!this.notificationsOpen) {
+    openMobileNotifications () {
+      this.notificationsOpen = true
+    },
+    closeMobileNotifications () {
+      if (this.notificationsOpen) {
+        // make sure to mark notifs seen only when the notifs were open and not
+        // from close-calls.
+        this.notificationsOpen = false
         this.markNotificationsAsSeen()
       }
     },
@@ -44,6 +49,13 @@ const MobileNav = {
     markNotificationsAsSeen () {
       this.$refs.notifications.markAsSeen()
     }
+  },
+  watch: {
+    $route () {
+      // handles closing notificaitons when you press any router-link on the
+      // notifications.
+      this.closeMobileNotifications()
+    }
   }
 }
 
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 514931f0..39622fad 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -8,7 +8,7 @@
         <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
       </div>
       <div class='item right'>
-        <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="toggleMobileNotifications()">
+        <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
           <i class="button-icon icon-bell-alt"></i>
           <div class="alert-dot" v-if="unseenNotificationsCount"></div>
         </a>
@@ -18,7 +18,7 @@
     <div v-if="currentUser" class="mobile-notifications-drawer" :class="{ 'closed': !notificationsOpen }">
       <div class="mobile-notifications-header">
         <span class="title">{{$t('notifications.notifications')}}</span>
-        <a class="mobile-nav-button" @click.stop.prevent="toggleMobileNotifications()">
+        <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
           <i class="button-icon icon-cancel"/>
         </a>
       </div>