feature: add notifications

src/dependencies.pug

@@ -31,9 +31,9 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6
 //- local
 link(rel='import', href='/lib/sib-core/sib-display.html')
 link(rel='import', href='/lib/sib-router/sib-router.html')
-link(rel='import', href='/lib/sib-chat/sib-chat.html')
+//- link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
   link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")
   link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html")
-  link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")
+link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")

src/header.pug

@@ -8,10 +8,13 @@
     i#search-icon.icon-magnifier(aria-hidden='true')
     i#close-search-icon.icon-close(aria-hidden='true')
 
-#notification
+details
+  summary#notifications-button
+  #notifications
+    include page-notifications.pug
 
 #profile
   img(src="/images/user.jpg")
   span
     | Profile 
-    span.icon-arrow-down
+    span.icon-arrow-down

src/index.pug

@@ -6,6 +6,7 @@ html(lang="en")
     title HD App
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
     meta(http-equiv="X-UA-Compatible", content="ie=edge")
+    link(rel="icon" type="image/png" href="/images/logo.png")
     include dependencies.pug
   body
     header#header

src/page-notifications.pug

@@ -0,0 +1,7 @@
+div.frame
+  h1 Notifications
+
+  sib-display(
+    data-src=`${sdn}/notifications/`
+    data-fields='summary'
+)

src/scripts/hd-widgets.js

@@ -119,7 +119,6 @@ document.addEventListener('WebComponentsReady', function(event) {
     }
 
     render() {
-      console.log(this.value);
       this.innerHTML = this.template;
     }
   }
@@ -134,7 +133,6 @@ document.addEventListener('WebComponentsReady', function(event) {
     }
 
     render() {
-      console.log(this.value);
       this.innerHTML = this.template;
     }
   }
@@ -153,7 +151,6 @@ document.addEventListener('WebComponentsReady', function(event) {
     }
 
     render() {
-      console.log(this.value);
       this.innerHTML = this.template;
     }
   }

src/styles/main.scss

@@ -92,9 +92,26 @@ h4 {
   flex: 1 1 0px;
 }
 
-#notification {
+#notifications-button {
   @include icon(bell);
   font-size: 1.5em;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+#notifications{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 0;
+  left: 0;
+  z-index: 1;
+  >div{
+    position: absolute;
+    top: 0;
+    right: 0;
+
+  }
 }
 
 #profile {