add notification counter to indicator

InvenTree/InvenTree/static/script/inventree/notification.js

@@ -134,17 +134,22 @@ function showMessage(message, options={}) {
             },
             {
                 success: function(response) {
-                    if (response.length == 0) {
+                    updateNotificationIndicator(response.length);
-                        $("#notification-alert").addClass("d-none");
-                    } else {
-                        $("#notification-alert").removeClass("d-none");
-                    }
                 }
             }
         );
     }
 }
 
+function updateNotificationIndicator(counter) {
+    if (counter == 0) {
+        $("#notification-alert").addClass("d-none");
+    } else {
+        $("#notification-alert").removeClass("d-none");
+    }
+    $("#notification-counter").html(counter);
+}
+
 
 /**
  * Returns the html for a read / unread button

InvenTree/templates/navbar.html

@@ -75,8 +75,9 @@
       <li class='nav-item me-2'>
         <button data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" class='btn position-relative' title='{% trans "Show Notifications" %}'>
           <span class='fas fa-bell'></span>
-          <span class="position-absolute top-100 start-100 translate-middle p-2 bg-danger border border-light rounded-circle d-none" id="notification-alert">
+          <span class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger d-none" id="notification-alert">
             <span class="visually-hidden">{% trans "New Notifications" %}</span>
+            <span id="notification-counter">0</span>
           </span>
         </button>
       </li>