feat: re-add notification badge

src/fellchensammlung/static/fellchensammlung/css/main.scss

@@ -320,3 +320,29 @@ AN Cards
   background-color: var(--bulma-success-on-scheme);
 }
 
+
+
+.notification-container {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+}
+
+.notification-label {
+  padding: 2px 5px;
+}
+
+/* Make the badge float in the top right corner of the button */
+.notification-badge {
+    background-color: #fa3e3e;
+    border-radius: 2px;
+    color: white;
+
+    padding: 1px 3px;
+    font-size: 8px;
+
+    position: absolute; /* Position the badge within the relatively positioned button */
+    top: 0;
+    right: 0;
+}
+

src/fellchensammlung/templates/fellchensammlung/header.html

@@ -9,7 +9,8 @@
             <h1 class="title is-4">notfellchen.org</h1>
         </a>
 
-        <a role="button" class="navbar-burger" aria-label="{% trans 'Hauptmenü' %}"  tabindex="0" aria-expanded="false" data-target="navbarBasicExample">
+        <a role="button" class="navbar-burger" aria-label="{% trans 'Hauptmenü' %}" tabindex="0" aria-expanded="false"
+           data-target="navbarBasicExample">
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
@@ -30,7 +31,16 @@
         </div>
         <div class="navbar-end">
             {% if user.is_authenticated %}
-
+                <div class="navbar-item">
+                    <div class="notification-container">
+                        <a class="notification-label" href="{% url 'user-me' %}">
+                            <i class="fas fa-bell fa-fw"></i>
+                        </a>
+                        {% if request.user.get_num_unread_notifications > 0 %}
+                            <span class="notification-badge">{{ request.user.get_num_unread_notifications }}</span>
+                        {% endif %}
+                    </div>
+                </div>
                 <div class="navbar-item">
                     <a href="{% url 'user-me' %}">
                         <i class="fas fa-user fa-fw"></i> {{ user }}