2 files changed, 23 insertions, 1 deletions
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index ea5d7ea4..aa3f7605 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,10 +1,23 @@
+import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
+
 const NavPanel = {
+  created () {
+    if (this.currentUser && this.currentUser.locked) {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+
+      followRequestFetcher.startFetching({ store, credentials })
+    }
+  },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
     },
     chat () {
       return this.$store.state.chat.channel
+    },
+    followRequestCount () {
+      return this.$store.state.api.followRequests.length
     }
   }
 }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 3aa0a793..7a7212fb 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -19,7 +19,10 @@
         </li>
         <li v-if='currentUser && currentUser.locked'>
           <router-link :to="{ name: 'friend-requests' }">
-            {{ $t("nav.friend_requests") }}
+            {{ $t("nav.friend_requests")}}
+            <span v-if='followRequestCount > 0' class="badge follow-request-count">
+              {{followRequestCount}}
+            </span>
           </router-link>
         </li>
         <li>
@@ -52,6 +55,12 @@
   padding: 0;
 }
 
+.follow-request-count {
+  margin: -6px 10px;
+  background-color: $fallback--bg;
+  background-color: var(--input, $fallback--faint);
+}
+
 .nav-panel li {
   border-bottom: 1px solid;
   border-color: $fallback--border;