From 4f0cc950bcc1fed0fcc5957f72a01a59ee6a2009 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 11 Jul 2024 11:52:55 -0400
Subject: [PATCH] Update notification bell when notifications have been cleared

---
 netbox/templates/htmx/notifications.html    | 2 ++
 netbox/templates/inc/notification_bell.html | 9 +++++++++
 netbox/templates/inc/user_menu.html         | 6 +-----
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 netbox/templates/inc/notification_bell.html

diff --git a/netbox/templates/htmx/notifications.html b/netbox/templates/htmx/notifications.html
index 0fb5501a2..12ef8c511 100644
--- a/netbox/templates/htmx/notifications.html
+++ b/netbox/templates/htmx/notifications.html
@@ -29,3 +29,5 @@
     </a>
   {% endif %}
 </div>
+{% include 'inc/notification_bell.html' %}
+
diff --git a/netbox/templates/inc/notification_bell.html b/netbox/templates/inc/notification_bell.html
new file mode 100644
index 000000000..5140a2f3f
--- /dev/null
+++ b/netbox/templates/inc/notification_bell.html
@@ -0,0 +1,9 @@
+{% if notifications %}
+  <span class="text-primary" id="notifications-alert" hx-swap-oob="true">
+    <i class="mdi mdi-bell-badge"></i>
+  </span>
+{% else %}
+  <span class="text-muted" id="notifications-alert" hx-swap-oob="true">
+    <i class="mdi mdi-bell"></i>
+  </span>
+{% endif %}
diff --git a/netbox/templates/inc/user_menu.html b/netbox/templates/inc/user_menu.html
index de9dcac8e..ab2c31239 100644
--- a/netbox/templates/inc/user_menu.html
+++ b/netbox/templates/inc/user_menu.html
@@ -6,11 +6,7 @@
   {% with notifications=request.user.notifications.unread.exists %}
     <div class="nav-item dropdown">
       <a href="#" class="nav-link" data-bs-toggle="dropdown" hx-get="{% url 'extras:notifications' %}" hx-target="next .notifications" aria-label="Notifications">
-          {% if notifications %}
-            <span class="text-primary"><i class="mdi mdi-bell-badge"></i></span>
-          {% else %}
-            <i class="mdi mdi-bell"></i>
-          {% endif %}
+        {% include 'inc/notification_bell.html' %}
       </a>
       <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications"></div>
     </div>