notifications: Close dropdown when clicking outside

The notifications dropdown does not behave like the other 3 dropdowns in
the navigation bar, but a user would expect it to, since it is also
visually a dropdown like the others.

Added JavaScript for a click listener that would collapse the
notifications dropdown if the user clicks anywhere outside the dropdown
area.

Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

static/themes/default/js/main.js

@@ -272,7 +272,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 /*
  * Text areas showing log lines have special behavior.
  */
-document.addEventListener('DOMContentLoaded', function(event) {
+document.addEventListener('DOMContentLoaded', function (event) {
     const logElements = document.querySelectorAll('textarea.log');
 
     // Scroll the textarea to the bottom so that last lines are visible.
@@ -280,3 +280,26 @@ document.addEventListener('DOMContentLoaded', function(event) {
         element.scrollTop = element.scrollHeight;
     }
 });
+
+/*
+ * Close notifications dropdown when clicking outside, like the other dropdowns.
+ */
+document.addEventListener('click', function (event) {
+    // Ignore if notifications dropdown is not open
+    const notifications = document.querySelector('.notifications');
+    if (!notifications?.classList.contains('show')) {
+        return;
+    }
+
+    // Ignore if the click happened inside the notifications area or on the toggle button
+    const toggles = document.querySelectorAll('[data-bs-target=".notifications"]');
+    const clickedInsideToggle = Array.from(toggles).some(toggle => toggle.contains(event.target));
+    if (notifications.contains(event.target) || clickedInsideToggle) {
+        return;
+    }
+
+    if (typeof bootstrap !== 'undefined' && bootstrap.Collapse) {
+        let bsCollapse = bootstrap.Collapse.getInstance(notifications);
+        bsCollapse.hide();
+    }
+});