2 files changed, 14 insertions, 2 deletions
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 0cd67990..ec9aeed0 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -57,6 +57,12 @@ const MobileNav = {
     unseenNotificationsCount () {
       return this.unseenNotifications.length + countExtraNotifications(this.$store)
     },
+    unseenCount () {
+      return this.unseenNotifications.length
+    },
+    unseenCountBadgeText () {
+      return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
+    },
     hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name },
     isChat () {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index ecd8290a..f20a509d 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -50,7 +50,13 @@
       @touchmove.stop="notificationsTouchMove"
     >
       <div class="mobile-notifications-header">
-        <span class="title">{{ $t('notifications.notifications') }}</span>
+        <span class="title">
+          {{ $t('notifications.notifications') }}
+          <span
+            v-if="unseenCountBadgeText"
+            class="badge badge-notification unseen-count"
+          >{{ unseenCountBadgeText }}</span>
+        </span>
         <span class="spacer" />
         <button
           v-if="notificationsAtTop"
@@ -69,7 +75,7 @@
         <button
           v-if="!closingDrawerMarksAsSeen"
           class="button-unstyled mobile-nav-button"
-          :title="$t('nav.mobile_notifications_close')"
+          :title="$t('nav.mobile_notifications_mark_as_seen')"
           @click.stop.prevent="markNotificationsAsSeen()"
         >
           <FAIcon