ui: Use collapse instead of dropdown for notification in Bootstrap 5

- In Bootstrap 5, dropdown button and dropdown menu not being siblings does not
work like it did in Bootstrap 4.

- Use collapse component instead of dropdown. Collapse component does not have
the same limitations. Apply some of the styling from dropdown-menu to restore
previous appearance.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/templates/notifications-dropdown.html

@@ -7,9 +7,9 @@
 {% load i18n %}
 
 {% if notifications %}
-  <li class="nav-item dropdown notifications-dropdown">
+  <li class="nav-item notifications-dropdown">
     <a href="#" title="{% trans "Notifications" %}"
-       class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+       class="nav-link dropdown-toggle" data-bs-toggle="collapse"
        role="button" aria-expanded="false" aria-haspopup="true"
        data-bs-target=".notifications">
       <span class="fa fa-bell nav-icon"></span>

plinth/templates/notifications.html

@@ -8,8 +8,8 @@
 {% load static %}
 
 {% if notifications %}
-  <div class="notifications dropdown">
+  <div class="notifications collapse">
-    <ul class="dropdown-menu" role="menu">
+    <ul>
       {% for note in notifications %}
         <li class="notification notification-{{ note.severity }}">
           {% if note.data.app_name %}

static/themes/default/css/main.css

@@ -941,16 +941,25 @@ input[type='submit'].running-status-button {
 .notifications {
     margin-left: -0.9375rem;
     margin-right: -0.9375rem;
+    position: relative;
+    transition: none;  /* Remove Bootstrap's default animation */
 }
 
-.notifications .dropdown-menu {
+.notifications.collapsing {
+    display: none;  /* Don't show up with blue background momentarily */
+}
+
+.notifications > ul {
+    position: absolute; /* Don't increase parent's height */
+    list-style: none;
     width: 100%;
     padding: 0;
     float: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
     margin-top: 0;
     background-clip: border-box;
+    background-color: var(--bs-body-bg);
+    border: 1px solid rgba(0,0,0,0.15);
+    border-radius: 0 0 0.25em 0.25em;
 }
 
 /* Style for individual notification */