feat(client): Add notification badge

fixes #4365
closes #7755

website/client/css/menu.styl

@@ -139,6 +139,15 @@
   hrpg-button-color-mixin($color-toolbar)
   > a span.inactive
     opacity: 0.236 !important
+  > a span.notification-counter
+    background: #428bca
+    color: #fff
+    position: absolute
+    top: -5px
+    right: -7px
+    font: bold 12px/12px "Lato", sans-serif
+    border-radius: 50px
+    padding: 3px 6px
   div
     padding-bottom: 1em
     width: 300px

website/client/js/controllers/menuCtrl.js

@@ -29,6 +29,32 @@ angular.module('habitrpg')
       $scope.clearMessages = Chat.markChatSeen;
       $scope.clearCards = Chat.clearCards;
 
+      $scope.getNotificationsCount = function() {
+        var count = 0;
+
+        if($scope.user.invitations.party && $scope.user.invitations.party.id){
+          count++;
+        }
+
+        if($scope.user.purchased.plan && $scope.user.purchased.plan.mysteryItems.length){
+          count++;
+        }
+
+        if($scope.user.invitations.guilds){
+          count += $scope.user.invitations.guilds.length;
+        }
+
+        if($scope.user.flags.classSelected && !$scope.user.preferences.disableClasses && $scope.user.stats.points){
+          count += $scope.user.stats.points > 0 ? 1 : 0;
+        }
+
+        if($scope.user.newMessages) {
+          count += Object.keys($scope.user.newMessages).length;
+        }
+
+        return count;
+      };
+
       $scope.iconClasses = function() {
         return selectNotificationValue(
           'glyphicon-gift',

website/views/shared/header/menu.jade

@@ -177,6 +177,7 @@ nav.toolbar(ng-controller='MenuCtrl')
       li.toolbar-notifs
         a(data-expand-menu, menu='notifs')
           span.glyphicon(ng-class='iconClasses()')
+          span.notification-counter(ng-if='getNotificationsCount()') {{getNotificationsCount()}}
         div(ng-show='_expandedMenu.menu === "notifs"')
           h4=env.t('notifications')
           div