feat: Add notification counter

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -144,7 +144,7 @@ select, .button {
         height: 40px;
     }
 
-    a:hover, .button_darken:hover {
+    .button_darken:hover {
         background-color: var(--highlight-one);
         color: var(--highlight-one-text);
     }
@@ -415,6 +415,25 @@ select, .button {
     max-height: 250px;
 }
 
+.btn-notification {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+}
+/* Make the badge float in the top right corner of the button */
+.button__badge {
+  background-color: #fa3e3e;
+  border-radius: 2px;
+  color: white;
+
+  padding: 1px 3px;
+  font-size: 10px;
+
+  position: absolute; /* Position the badge within the relatively positioned button */
+  top: 0;
+  right: 0;
+}
+
 .adoption-card-report-link, .notification-card-mark-read {
     margin-left: auto;
     font-size: 2rem;

src/fellchensammlung/templates/fellchensammlung/header.html

@@ -18,7 +18,15 @@
         <div class="profile-card">
             {% include "fellchensammlung/forms/change_language.html" %}
             {% if user.is_authenticated %}
-                <a class="btn2" href="{{ user.get_notifications_url }}"><i class="fa fa-bell" aria-hidden="true"></i></a>
+
+                <div class="btn2 button_darken btn-notification">
+                    <a href="{{ user.get_notifications_url }}">
+                        <i class="fa fa-bell" aria-hidden="true"></i>
+                    </a>
+                    <span class="button__badge">4</span>
+
+                </div>
+
                 <a class="btn2" href="{{ user.get_absolute_url }}"><i aria-hidden="true" class="fas fa-user"></i></a>
                 <form class="btn2 button_darken" action="{% url 'logout' %}" method="post">
                     {% csrf_token %}