feature: sib-badge for users messages

src/menu-left.pug

+sib-widget(name='hd-counter')
+  template
+    sib-badge(data-src="${id}")
 nav#main__menu
   sib-router#navbar-router(default-route='members')
     sib-route.menu(name='members')
@@ -16,12 +19,12 @@ nav#main__menu
         div.menu-label Projects
         div.menu-icon.icon-folder-alt
       sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, rdf-type='hd:project', use-id='')
-      div.sub-menu
+      div.sub-menu.menu-notification
         sib-display(
-          data-src=`${sdn}/sources/projects/`,
-          data-fields='project',
-          set-project='customer.name, dash, name',
-          value-dash=' - ',
+          data-src=`${sdn}/sources/projects/`
+          data-fields='project'
+          set-project='customer.name, dash, name'
+          value-dash=' - '
           next='project'
         )
     //- div.divider
@@ -47,12 +50,14 @@ nav#main__menu
         div.menu-label Chat
         div.menu-icon.icon-envelope-letter
       sib-route(hidden, name='messages', id-prefix=`${sdn}/users/`, rdf-type='foaf:user', use-id='')
-      div.sub-menu
+      div.sub-menu.menu-notification
         sib-display(
-          data-src=`${sdn}/users/`,
-          data-fields='username',
-          widget-user.username='sib-display-div',
+          data-src=`${sdn}/users/`
+          data-fields='username, account.user'
+          widget-username='sib-display-div'
+          widget-account.user='hd-counter'
           next='messages'
         )
+
     div.divider
 

src/styles/base/menu-left.scss

@@ -109,7 +109,33 @@
           }
         }
       }
-    }
+
+      &.menu-notification {
+        > sib-display > div > sib-display > div {
+            display: flex;
+            sib-display-div {
+              flex: 3;
+            }
+            hd-counter {
+              height: 20px;
+              width: 20px;
+              margin-right: 1em;
+              div:not(:empty) {
+                text-align: center;
+                display: block;
+                background-color: var(--sib-notifications-theme, gray);
+                border-radius: 50%;
+                font-size: 12px;
+                line-height: 20px;
+                width: 20px;
+                height: 20px;
+                padding-bottom: 0;
+                color: $color-216-4-22;
+              }
+            }
+          }
+        }
+      }
 
     .divider {
       height: 1px;