Add notification heading, make bellicon clickable, and align nav icons

hypha/static_src/src/javascript/apply/notifications.js

+function notificationToggle() {
+  document.getElementById("notificationDropdown").classList.toggle("show");
+}
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function(event) {
+  if (!event.target.matches('.dropbtn, .dropbtn *')) {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (openDropdown.classList.contains('show')) {
+        openDropdown.classList.remove('show');
+      }
+    }
+  }
+}

hypha/static_src/src/sass/apply/components/_activity-notifications.scss

 .dropbtn {
-    padding: 5px 12px;
+    padding: 7px 12px;
     cursor: pointer;
 }
 
 .dropdown {
     position: relative;
     display: inline-block;
-
-    &:hover {
-        .dropdown-content {
-            display: block;
-        }
-    }
 }
 
 .dropdown-content {
@@ -42,3 +36,7 @@
 .source-label {
     background-color: #7dc588;
 }
+
+.show {
+    display:block;
+}

hypha/templates/base-apply.html

@@ -30,6 +30,7 @@
         <script src="{% static 'js/jquery.min.js' %}"></script>
         <script src="{% static 'js/js.cookie.min.js' %}"></script>
         <script src="{% static 'js/main-top.js' %}"></script>
+        <script src="{% static 'js/apply/notifications.js' %}"></script>
         {% if COOKIES_ACCEPTED and MATOMO_URL and MATOMO_SITEID %}
         {# we are only expecting strings, so make sure we escape the values #}
         <script>
@@ -106,14 +107,15 @@
                 <div class="header__button-container">
                     {% if latest_notifications %}
                     <div class="dropdown">
-                        <a href="#" class=" button--contains-icons dropbtn" aria-haspopup="activity" aria-expanded="false" role="button">
+                        <a href="#" onclick="return notificationToggle()" class=" button--contains-icons dropbtn" aria-haspopup="activity" aria-expanded="false" role="button">
                             <svg class="icon"><use xlink:href="#bell-icon"></use></svg>
                         </a>
-                        <div class="dropdown-content" role="activity">
+                        <div id="notificationDropdown" class="dropdown-content" role="activity">
+                            <p><b>Notifications</b></p>
                             {% for notification in latest_notifications %}
                             <p class="dropdown-item">
                                 <span class="source-label">{{ notification.source_content_type.name|source_type }}</span>
-                                <a href="{{ notification.source.get_absolute_url }}">{{ notification.source.title|capfirst }}</a>
+                                <a href="{{ notification.source.get_absolute_url }}">{{ notification.source.title|capfirst|truncatechars:15 }}</a>
                                 : {{ notification.user }} {% ifequal notification.type 'comment' %}made a comment{% else %} {{ notification.message|safe }}{% endifequal %}
                             </p>
                             {% endfor %}